How to hijack AngularJS data binding process?

Question

{{SomeData}} means a data binding with a model in AngularJS.

Does this data binding process happen instantaneously?

In my case, I want to know the exact time when the new data is presented to the user.

So, are there any methods that I can insert some code before or after the data is presented that gets the time?

Have you read the entirety of the docs, this is an interesting question.. but I feel the answer is no. — Callum Linington
– Callum Linington, Commented Dec 9, 2015 at 8:12
@CallumLinington I am still new to angular. I have read some related docs but not find a appropriate approach yet. — Fred Xue
– Fred Xue, Commented Dec 9, 2015 at 8:18

itamar · Accepted Answer · 2015-12-09 08:52:23Z

2

Probably no event that specifies what you asked for - but would a

$scope.$watch('SomeData', function(newVal, oldVal){
// code here
});

do the trick?

Possible performance fix:

If you take the var handling out of Angular (by triggering the change with a non-angular event like jQuery) - you can then choose when to do $scope.$apply() - thereby controlling the timing of things without using a $watch.

edited Dec 9, 2015 at 8:52

answered Dec 9, 2015 at 8:16

itamar

3,9775 gold badges37 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Callum Linington Over a year ago

All I would say is the more watchers that are created the more of a performance penalty you'll get, but then that's entirely down to the scenario in which this is used.

Fred Xue Over a year ago

It does. But I prefer a more light-weight way to do this stuff because I want to get the real performance data...

itamar Over a year ago

I added an idea for a possible performance hack that would force your var change out of Angular and require you to run $apply when you're ready.

Guenter Guckelsberger · Accepted Answer · 2015-12-09 08:36:03Z

Maybe it can serve your purpose if you do it like in this demo

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = function() {
    var date = new Date();
    console.log("called just now at ", date)
    return 'World';
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name()}}!</p>
  </body>

</html>

Collectives™ on Stack Overflow

How to hijack AngularJS data binding process?

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related