在 AngularJS 中数据绑定是如何工作的?

How does data binding work in the AngularJS framework?

I haven't found technical details on their site. It's more or less clear how it works when data is propagated from view to model. But how does AngularJS track changes of model properties without setters and getters?

I found that there are JavaScript watchers that may do this work. But they are not supported in Internet Explorer 6 and Internet Explorer 7. So how does AngularJS know that I changed for example the following and reflected this change on a view?

myobject.myproperty="new value";

转载于:https://stackoverflow.com/questions/9682092/how-does-data-binding-work-in-angularjs

csdnceshi77
狐狸.fox For those still reading this question, please note that Angular 2.0 has heavily changed how they go about databinding since Angular 1.x in order to work with web components and address a lot of the issues in the answers below.
5 年多之前 回复
csdnceshi72
谁还没个明天 that link is bad. updated to (I assume) is the same - docs.angularjs.org/guide/databinding
接近 7 年之前 回复
weixin_41568134
MAO-EYE Marcello's link is apparently broken, so here it is again: github.com/mhevery/angular.js/blob/master/docs/content/guide/…
大约 8 年之前 回复
weixin_41568174
from.. Be aware that since angular 1.0.0rc1 you need to specify ng-model-instant (docs-next.angularjs.org/api/…) to have your moder updated insantly. Otherwise it will be updated on blur event.
8 年多之前 回复

14个回答

AngularJS remembers the value and compares it to a previous value. This is basic dirty-checking. If there is a change in value, then it fires the change event.

The $apply() method, which is what you call when you are transitioning from a non-AngularJS world into an AngularJS world, calls $digest(). A digest is just plain old dirty-checking. It works on all browsers and is totally predictable.

To contrast dirty-checking (AngularJS) vs change listeners (KnockoutJS and Backbone.js): While dirty-checking may seem simple, and even inefficient (I will address that later), it turns out that it is semantically correct all the time, while change listeners have lots of weird corner cases and need things like dependency tracking to make it more semantically correct. KnockoutJS dependency tracking is a clever feature for a problem which AngularJS does not have.

Issues with change listeners:

  • The syntax is atrocious, since browsers do not support it natively. Yes, there are proxies, but they are not semantically correct in all cases, and of course there are no proxies on old browsers. The bottom line is that dirty-checking allows you to do POJO, whereas KnockoutJS and Backbone.js force you to inherit from their classes, and access your data through accessors.
  • Change coalescence. Suppose you have an array of items. Say you want to add items into an array, as you are looping to add, each time you add you are firing events on change, which is rendering the UI. This is very bad for performance. What you want is to update the UI only once, at the end. The change events are too fine-grained.
  • Change listeners fire immediately on a setter, which is a problem, since the change listener can further change data, which fires more change events. This is bad since on your stack you may have several change events happening at once. Suppose you have two arrays which need to be kept in sync for whatever reason. You can only add to one or the other, but each time you add you fire a change event, which now has an inconsistent view of the world. This is a very similar problem to thread locking, which JavaScript avoids since each callback executes exclusively and to completion. Change events break this since setters can have far-reaching consequences which are not intended and non obvious, which creates the thread problem all over again. It turns out that what you want to do is to delay the listener execution, and guarantee, that only one listener runs at a time, hence any code is free to change data, and it knows that no other code runs while it is doing so.

What about performance?

So it may seem that we are slow, since dirty-checking is inefficient. This is where we need to look at real numbers rather than just have theoretical arguments, but first let's define some constraints.

Humans are:

  • Slow — Anything faster than 50 ms is imperceptible to humans and thus can be considered as "instant".

  • Limited — You can't really show more than about 2000 pieces of information to a human on a single page. Anything more than that is really bad UI, and humans can't process this anyway.

So the real question is this: How many comparisons can you do on a browser in 50 ms? This is a hard question to answer as many factors come into play, but here is a test case: http://jsperf.com/angularjs-digest/6 which creates 10,000 watchers. On a modern browser this takes just under 6 ms. On Internet Explorer 8 it takes about 40 ms. As you can see, this is not an issue even on slow browsers these days. There is a caveat: The comparisons need to be simple to fit into the time limit... Unfortunately it is way too easy to add a slow comparison into AngularJS, so it is easy to build slow applications when you don't know what you are doing. But we hope to have an answer by providing an instrumentation module, which would show you which are the slow comparisons.

It turns out that video games and GPUs use the dirty-checking approach, specifically because it is consistent. As long as they get over the monitor refresh rate (typically 50-60 Hz, or every 16.6-20 ms), any performance over that is a waste, so you're better off drawing more stuff, than getting FPS higher.

weixin_41568134
MAO-EYE I have to downvote it, because It makes too naive and generalized assumptions. It should have been: for common end-users is 50 ms browser reaction time more then fast enough. However, there are uncommon end-users, which require faster reaction time, while working/manipulating with more data, on slower machines! You can't just generalize assumptions like that... (btw, I love and use AngularJS for small web-apps)
大约 4 年之前 回复
csdnceshi74
7*4 "Anything faster than 50 ms is imperceptible to humans" Good luck playing certain games (shooters, pinball..) on a 50ms delay display :)
接近 5 年之前 回复
csdnceshi66
必承其重 | 欲带皇冠 So I read this answer, and it doesn't explain how AngularJS really work other than a vague "remembers the value and compares it to previous value", but is digresses into a bash-fest on other implementations. Great .. as the question was not about such or even about performance.
大约 5 年之前 回复
csdnceshi53
Lotus@ Good answer overall but I couldn't disagree more on the "Anything more than that (2000 pieces of information) is really bad UI" part. As soon as you go into business software or social networking, 2000 pieces of information on the same page is just common. The typical Airbnb, Twitter, Facebook or SalesForce page potentially handles way more than 2000 pieces of information.
大约 5 年之前 回复
csdnceshi72
谁还没个明天 you could be removing items past a certain amount of pixels above or below the viewport.
大约 5 年之前 回复
weixin_41568126
乱世@小熊 you do one-time binding.
5 年多之前 回复
csdnceshi69
YaoRaoLov this comment is perfect for Angular to defend against Ember.js or Sproutcore or anyother frameworks.. although latter frameworks are beautiful in its way and powerful if you leverage on their way of design.. Angular JS is a game changer in Webworld running in a sandboxed browsers..
5 年多之前 回复
csdnceshi57
perhaps? "Anything faster than 50 ms is imperceptible to humans" is not true. In testing we have found our customers can easily distinguish between 50ms update latency (20fps) and 16.6ms update latency (60fps). Scenes running at the former speed consistently get poorer overall "how did it feel" ratings even when people did not consciously register the framerate.
大约 6 年之前 回复
csdnceshi76
斗士狗 50ms is not 50fps, it's 20fps and it's very slow. For 50fps the $digest should take max 20ms.
大约 6 年之前 回复
csdnceshi78
程序go That would indicate a fault in your implementation, not with angular.
大约 6 年之前 回复
csdnceshi52
妄徒之命 In case of realtime updates using server push, even a digest lag of 50ms can be a problem as the user notices stuttering e.g. when scrolling whenever an event comes in
6 年多之前 回复
csdnceshi61
derek5. i had request to make app with 2000 +elements on page (big tables) and made it with angular, it turned out that binding and rendering is not 60ms its 30-40secs on latest machine, then switched to backbone and booom 30k+ elements, inline editing, bindings etc, ~5ms lag
6 年多之前 回复
csdnceshi80
胖鸭 The statement could be easily said in reverse as "Dirty checking is a clever feature for a problem which knockout does not have". ES6 is using observables and angular is getting rid of dirty checking. The real world caught up to this answer and shown it to be false.
6 年多之前 回复
csdnceshi79
python小菜 how do tests and limits compare to mobile browsers/apps ?
6 年多之前 回复
weixin_41568183
零零乙 This is best explanation I have read so far. I too wrote on this coolcoder.in/2014/03/how-databinding-works-in-angular-js.html
6 年多之前 回复
csdnceshi58
Didn"t forge you could add all your items in a 0ms $timeout to fix that issue.
6 年多之前 回复
csdnceshi62
csdnceshi62 "Say you want to add items into an array, as you are looping to add, each time you add you are firing events on change, which is rendering the UI. This is very bad for performance" If you know what you are doing in Backbone or any other framework, you only react to the array set event (collection reset), not each individual item.
接近 7 年之前 回复
csdnceshi55
~Onlooker Me neither ; I suspect the trailing slash...
大约 7 年之前 回复
csdnceshi65
larry*wei All of blogs.valvesoftware.com/abrash (Michael Abrash's Valve blog) is indeed great reading if you're interested in VR. For some reason, your link doesn't work even though that article exists.
大约 7 年之前 回复
csdnceshi55
~Onlooker The articles @NateBundy is referring about VR and latency > 60fps : blogs.valvesoftware.com/abrash/…. You confirm NateBundy ?
大约 7 年之前 回复
csdnceshi64
游.程 On mobile phones, so much dirty-checking can pose a problem. Check out the articles that have come out about the speed of Javascript on mobile phones. The "update on every change" is not a necessary consequence of accessor methods, they can queue things just as well as the Angular digest cycle does. Except they will know exactly what changed, and not go through all the bindings. In fact, many mobile browsers support defineSetter and defineGetter which may help ease the syntax a great deal for marking things as potentially dirty.
大约 7 年之前 回复
csdnceshi77
狐狸.fox misko hevery : "Change listeners fire immediately on setter", this isn't true is all cases, you can have change listeneners which aggregate events, and trigger their listeners in the digest cycle.
7 年多之前 回复
weixin_41568196
撒拉嘿哟木头 Just wondering, if your app is like Twitter or a comment thread/forum, and you implement infinite scrolling based on Angular, you could run into the "2000 pieces of info" "limit". A single comment could easily have several variables for the author's name, profile img, content, datetime, and etc. Also, say we have a giant array for storing all the comments/posts, every dirty checking would require scanning of this array, am I right? This would make the browser a bit laggy at times which is a bad user experience. What do you suggest we do in this case to ensure reasonable performance?
7 年多之前 回复
csdnceshi63
elliott.david No Misko... don't go there, that place where the argument of "anything above 50fps cannot be perceived" exists! But otherwise, thanks for the great answer :)
7 年多之前 回复
csdnceshi71
Memor.の This should be on angular docs. As of now Angular documentation is one of the most esoteric documentation I have ever seen.
7 年多之前 回复
csdnceshi54
hurriedly% Ah, I thought just changing a value in javascript would make the bindings change from seeing the chrome extension work, but it must be calling $apply()
7 年多之前 回复
csdnceshi60
℡Wang Yan Unless angular needs to get into its cycle (which will only happen when there is a angularized event in DOM or angluarized $http ajax call or $apply call) then it won't waste a tiny juice on background tabs to crunch for dirty checking
7 年多之前 回复
weixin_41568208
北城已荒凉 us is µs just like in utorrent 1µs = 0.000001s
7 年多之前 回复
weixin_41568110
七度&光 Please clarify what "us" means in "That means that you have 25us per comparison". User Sessions? Umbrella Stations? Uranus Scientists?
7 年多之前 回复
csdnceshi68
local-host Can you provide a link to info on video games using dirty checking for performance? I can't find anything about it.
7 年多之前 回复
csdnceshi65
larry*wei This entire answer is great other than "As long as they get 50 fps, any performance over that is a waste, since the human eye can not appreciate it, so you're better off drawing more stuff, than getting fps higher." That statement is completely incorrect depending on your application. The eye can definitely appreciate more than 50 fps, and as the various problems with VR show (read any of the latest from John Carmack or Michael Abrash, especially the latter's GDC 2013 VR talk), 50 fps is actually way too slow. Other than that, your answer is great. I just don't want misinformation spreading.
7 年多之前 回复
csdnceshi56
lrony* - yes, in KO you just add .extend({ throttle: 500 }) to wait 500 milliseconds after the last change event before acting on it.
7 年多之前 回复
weixin_41568184
叼花硬汉 "Change listeners fire immediately on setter" -- They don't have to. Can't we just queue the listener to fire later, when the current function is done executing, the same as Angular, except without the need to poll hundreds or thousands of properties at the end?
7 年多之前 回复
csdnceshi70
笑故挽风 you should check out Rx.Js or Bacon.js - and Functional Reactive Programming (FRP) in general, as that aims to solve the exact problem you are describing.
7 年多之前 回复
weixin_41568174
from.. Normally DOM event listening should be done through Angular directives. DOM event listening, jQuery, and other DOM related code does not belong in "user code" in an Angular application. Instead, if Angular doesn't already support your needs, then you should implement a directive ("library code") to abstract it away from your "user code". In some cases you might feel that the cost of implementing a new directive out-weights the benefits (clean code, separation of concerns, reusability), in which case you can just wrap your event handling in $scope.$apply.
接近 8 年之前 回复
csdnceshi73
喵-见缝插针 Hevery: Could you give an example of when proxies are not semantically correct?
大约 8 年之前 回复
csdnceshi51
旧行李 The strategy is nice, but it's only working when the change is going through the AngularJS event loop. If the change is not performed as an AngularJS UI response event, e.g. a DOM event listener, it is not detected. But that's a fair compromise....
大约 8 年之前 回复
csdnceshi75
衫裤跑路 Wouldn't you get increased performances by using many smaller scopes ?
8 年多之前 回复

Misko already gave an excellent description of how the data bindings work, but I would like to add my view on the performance issue with the data binding.

As Misko stated, around 2000 bindings are where you start to see problems, but you shouldn't have more than 2000 pieces of information on a page anyway. This may be true, but not every data-binding is visible to the user. Once you start building any sort of widget or data grid with two-way binding you can easily hit 2000 bindings, without having a bad UX.

Consider, for example, a combo box where you can type text to filter the available options. This sort of control could have ~150 items and still be highly usable. If it has some extra feature (for example a specific class on the currently selected option) you start to get 3-5 bindings per option. Put three of these widgets on a page (e.g. one to select a country, the other to select a city in the said country, and the third to select a hotel) and you are somewhere between 1000 and 2000 bindings already.

Or consider a data-grid in a corporate web application. 50 rows per page is not unreasonable, each of which could have 10-20 columns. If you build this with ng-repeats, and/or have information in some cells which uses some bindings, you could be approaching 2000 bindings with this grid alone.

I find this to be a huge problem when working with AngularJS, and the only solution I've been able to find so far is to construct widgets without using two-way binding, instead of using ngOnce, deregistering watchers and similar tricks, or construct directives which build the DOM with jQuery and DOM manipulation. I feel this defeats the purpose of using Angular in the first place.

I would love to hear suggestions on other ways to handle this, but then maybe I should write my own question. I wanted to put this in a comment, but it turned out to be way too long for that...

TL;DR
The data binding can cause performance issues on complex pages.

csdnceshi60
℡Wang Yan Like "Misko already gave an excellent description of how the data bindings work" (actually, strike that; as his answer is mostly just a campaign against other approaches), this answer does not answer the question asked.
大约 5 年之前 回复
csdnceshi71
Memor.の And as @Joel suggested above React can be a solution in such cases, especially because it's not an alternative to angular, but a tool you can integrate also in an existing Angular app. For anyone interested here's (reddit.com/r/javascript/comments/1oo1y8/… ) an interesting post on Reddit about React performance.
大约 6 年之前 回复
csdnceshi71
Memor.の A shout from the future for anyone reading this: one time binding is now a core feature in Angular v1.3, read more here: docs.angularjs.org/guide/expression
大约 6 年之前 回复
weixin_41568110
七度&光 Honestly I thought bind-once was in the core. But it appears it's not. It's just something you can do when writing your own directives, basically linking stuff without watching them. However there is a ux mod for it: github.com/pasvaz/bindonce
6 年多之前 回复
weixin_41568131
10.24 - The indexes are certainly an improvement. However, they only help when the DOM needs to be replaced, the amount of databindings is still the same. Bind-once support in the Angular core sounds great; do you have a link to share?
6 年多之前 回复
weixin_41568110
七度&光 Angular now has one way and bind-once databinding to help with this problem. Furthermore it now has indexes for your repeater source, which lets you modify the list without rebuilding the dom for the entire content.
6 年多之前 回复
weixin_41568196
撒拉嘿哟木头 Is it fair to say that Angular is not only about data binding and some apps may not want to use this feature for exactly the reasons others have cited? I think the approach of DI and modularity is itself worth a lot; having magic auto-binding is nice but in every existing implementation has trade-offs of performance. Angular's way is arguably superior for the majority of CRUD web apps, and people are just hitting a wall by trying to take it to extremes. It would be nice to have an alternate method of event listening supported, but maybe that's fundamentally too complex for a single framework?
6 年多之前 回复
weixin_41568131
10.24 This talk at ng-conf actually adresses this issue, and gives some tips on how to handle it: youtube.com/watch?v=zyYpHIOrk_Y
6 年多之前 回复
weixin_41568131
10.24 Thank you! I'm pretty solidly locked into AngularJS for this project, but I'll definately have a look at those before starting a new one.
接近 7 年之前 回复
weixin_41568184
叼花硬汉 As far as "alternatives", Facebook React simply does one-way binding as you are doing, but it does give adaptors to allow two-way binding but its obvious you are making it two-way. RactiveJS calculates the dependencies and supports two-way binding, which seems more ideal to me.
接近 7 年之前 回复
weixin_41568131
10.24 I agree with that approach. It's still a data binding per option, but of course it's better if this just has to check against a property on an object instead of running through a function.
接近 7 年之前 回复
weixin_41568127
?yb? OK, I actually ran three variants in JSPerf and I saw no appreciable difference between them. Test results are here, if you're interested: 1 2 and 3. Of course the functions are very basic; more logic moved to functions would change the equation. I'm also very interested to hear anyone else's take on this issue.
接近 7 年之前 回复
weixin_41568127
?yb? - Sounds like you're saying that adding a "selected" class to a select option would add an additional data binding for every option. Wouldn't you just need one data binding on the select element itself to achieve this?
接近 7 年之前 回复
weixin_41568134
MAO-EYE We have similar issues with our data-grid with 50 as page size. I see that there are around 5-8k bindings registered on this page and as expected it performs poorly. @MW did you really try out the option you suggested in your post?
大约 7 年之前 回复
weixin_41568208
北城已荒凉 Yeah I second this. Our app's primary responsibility is to display connections between different entities. A given page might have 10 sections. Each section has a table. Each table has 2-5 typeahead filters. Each table has 2-5 columns, each with 10 rows. Very quickly we run into perf issues, and going with the "similar tricks" options.
大约 7 年之前 回复

By dirty checking the $scope object

Angular maintains a simple array of watchers in the $scope objects. If you inspect any $scope you will find that it contains an array called $$watchers.

Each watcher is an object that contains among other things

  1. An expression which the watcher is monitoring. This might just be an attribute name, or something more complicated.
  2. A last known value of the expression. This can be checked against the current computed value of the expression. If the values differ the watcher will trigger the function and mark the $scope as dirty.
  3. A function which will be executed if the watcher is dirty.

How watchers are defined

There are many different ways of defining a watcher in AngularJS.

  • You can explicitly $watch an attribute on $scope.

    $scope.$watch('person.username', validateUnique);
    
  • You can place a {{}} interpolation in your template (a watcher will be created for you on the current $scope).

    <p>username: {{person.username}}</p>
    
  • You can ask a directive such as ng-model to define the watcher for you.

    <input ng-model="person.username" />
    

The $digest cycle checks all watchers against their last value

When we interact with AngularJS through the normal channels (ng-model, ng-repeat, etc) a digest cycle will be triggered by the directive.

A digest cycle is a depth-first traversal of $scope and all its children. For each $scope object, we iterate over its $$watchers array and evaluate all the expressions. If the new expression value is different from the last known value, the watcher's function is called. This function might recompile part of the DOM, recompute a value on $scope, trigger an AJAX request, anything you need it to do.

Every scope is traversed and every watch expression evaluated and checked against the last value.

If a watcher is triggered, the $scope is dirty

If a watcher is triggered, the app knows something has changed, and the $scope is marked as dirty.

Watcher functions can change other attributes on $scope or on a parent $scope. If one $watcher function has been triggered, we can't guarantee that our other $scopes are still clean, and so we execute the entire digest cycle again.

This is because AngularJS has two-way binding, so data can be passed back up the $scope tree. We may change a value on a higher $scope that has already been digested. Perhaps we change a value on the $rootScope.

If the $digest is dirty, we execute the entire $digest cycle again

We continually loop through the $digest cycle until either the digest cycle comes up clean (all $watch expressions have the same value as they had in the previous cycle), or we reach the digest limit. By default, this limit is set at 10.

If we reach the digest limit AngularJS will raise an error in the console:

10 $digest() iterations reached. Aborting!

The digest is hard on the machine but easy on the developer

As you can see, every time something changes in an AngularJS app, AngularJS will check every single watcher in the $scope hierarchy to see how to respond. For a developer this is a massive productivity boon, as you now need to write almost no wiring code, AngularJS will just notice if a value has changed, and make the rest of the app consistent with the change.

From the perspective of the machine though this is wildly inefficient and will slow our app down if we create too many watchers. Misko has quoted a figure of about 4000 watchers before your app will feel slow on older browsers.

This limit is easy to reach if you ng-repeat over a large JSON array for example. You can mitigate against this using features like one-time binding to compile a template without creating watchers.

How to avoid creating too many watchers

Each time your user interacts with your app, every single watcher in your app will be evaluated at least once. A big part of optimising an AngularJS app is reducing the number of watchers in your $scope tree. One easy way to do this is with one time binding.

If you have data which will rarely change, you can bind it only once using the :: syntax, like so:

<p>{{::person.username}}</p>

or

<p ng-bind="::person.username"></p>

The binding will only be triggered when the containing template is rendered and the data loaded into $scope.

This is especially important when you have an ng-repeat with many items.

<div ng-repeat="person in people track by username">
  {{::person.username}}
</div>
csdnceshi55
~Onlooker Superb and detailed answer. @superluminary, thanks for such answer. Moreover, after reading this answer, I come to the point that we must not add non-idempotent expression as an expression being watched.
4 年多之前 回复
csdnceshi50
三生石@ very well explained. Also, would like to know 1) what are the events which triggers a digest cycle. 2) what does $apply actually does.
4 年多之前 回复
csdnceshi65
larry*wei Nice answer covering how the dirty-check behaves and what its actually evaluating, one thing was not too clear in Misko's answer.
接近 5 年之前 回复
csdnceshi62
csdnceshi62 I don't doubt such is true, but questions questions and answers answers :)
大约 5 年之前 回复
weixin_41568131
10.24 - Misko is of course the creator of Angular, and a really nice guy as well. Without him we have no Angular. Thanks for the upvote :)
大约 5 年之前 回复
csdnceshi62
csdnceshi62 I disagree that said answer should be at the top; there is a difference between knowing something and writing a relevant/detailed reply for a specific question. There are better ways to get accolades. Anyway ..
大约 5 年之前 回复
weixin_41568131
10.24 Thanks @user2864740 - though it's right that Misko's answer should be top. He knows the framework better than anyone, and it's pretty cool that he engages with Stack Overflow..
大约 5 年之前 回复

Obviously there is no periodic checking of Scope whether there is any change in the Objects attached to it. Not all the objects attached to scope are watched . Scope prototypically maintains a $$watchers . Scope only iterates through this $$watchers when $digest is called .

Angular adds a watcher to the $$watchers for each of these

  1. {{expression}} — In your templates (and anywhere else where there’s an expression) or when we define ng-model.
  2. $scope.$watch(‘expression/function’) — In your JavaScript we can just attach a scope object for angular to watch.

$watch function takes in three parameters:

  1. First one is a watcher function which just returns the object or we can just add an expression.

  2. Second one is a listener function which will be called when there is a change in the object. All the things like DOM changes will be implemented in this function.

  3. The third being an optional parameter which takes in a boolean . If its true , angular deep watches the object & if its false Angular just does a reference watching on the object. Rough Implementation of $watch looks like this

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

There is an interesting thing in Angular called Digest Cycle. The $digest cycle starts as a result of a call to $scope.$digest(). Assume that you change a $scope model in a handler function through the ng-click directive. In that case AngularJS automatically triggers a $digest cycle by calling $digest().In addition to ng-click, there are several other built-in directives/services that let you change models (e.g. ng-model, $timeout, etc) and automatically trigger a $digest cycle. The rough implementation of $digest looks like this.

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

If we use JavaScript’s setTimeout() function to update a scope model, Angular has no way of knowing what you might change. In this case it’s our responsibility to call $apply() manually, which triggers a $digest cycle. Similarly, if you have a directive that sets up a DOM event listener and changes some models inside the handler function, you need to call $apply() to ensure the changes take effect. The big idea of $apply is that we can execute some code that isn't aware of Angular, that code may still change things on the scope. If we wrap that code in $apply , it will take care of calling $digest(). Rough implementation of $apply().

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};

Angular.js creates a watcher for every model we create in view. Whenever a model is changed, an "ng-dirty" class is appeneded to the model, so the watcher will observe all models which have the class "ng-dirty" & update their values in the controller & vice versa.

This is my basic understanding. It may well be wrong!

  1. Items are watched by passing a function (returning the thing to be watched) to the $watch method.
  2. Changes to watched items must be made within a block of code wrapped by the $apply method.
  3. At the end of the $apply the $digest method is invoked which goes through each of the watches and checks to see if they changed since last time the $digest ran.
  4. If any changes are found then the digest is invoked again until all changes stabilize.

In normal development, data-binding syntax in the HTML tells the AngularJS compiler to create the watches for you and controller methods are run inside $apply already. So to the application developer it is all transparent.

csdnceshi67
bug^君 i've read that digest will run a max of ten times sitepoint.com/understanding-angulars-apply-digest
5 年多之前 回复
csdnceshi59
ℙℕℤℝ I am not concerned about the last version of AngularJS. Are they already using proxies or Object.observe? If not, they are still in the dirty checking era, which builds a timed loop to see if model attributes have changed.
6 年多之前 回复
csdnceshi62
csdnceshi62 The digest loop runs as a result of some event or calling $apply(), it is not called periodically based on a timer. see How does AngularJS's $watch function work? and how does the binding and digesting work in AngularJS?
6 年多之前 回复
csdnceshi64
游.程 when is the apply method triggered?
大约 8 年之前 回复

AngularJs supports Two way data-binding.
Means you can access data View -> Controller & Controller -> View

For Ex.

1)

// If $scope have some value in Controller. 
$scope.name = "Peter";

// HTML
<div> {{ name }} </div>

O/P

Peter

You can bind data in ng-model Like:-
2)

<input ng-model="name" />

<div> {{ name }} </div>

Here in above example whatever input user will give, It will be visible in <div> tag.

If want to bind input from html to controller:-
3)

<form name="myForm" ng-submit="registration()">
   <label> Name </lbel>
   <input ng-model="name" />
</form>

Here if you want to use input name in the controller then,

$scope.name = {};

$scope.registration = function() {
   console.log("You will get the name here ", $scope.name);
};

ng-model binds our view and render it in expression {{ }}.
ng-model is the data which is shown to the user in the view and with which the user interacts.
So it is easy to bind data in AngularJs.

Explaining with Pictures :

Data-Binding needs a mapping

The reference in the scope is not exactly the reference in the template. When you data-bind two objects, you need a third one that listen to the first and modify the other.

enter image description here

Here, when you modify the <input>, you touch the data-ref3. And the classic data-bind mecanism will change data-ref4. So how the other {{data}} expressions will move ?

Events leads to $digest()

enter image description here

Angular maintains a oldValue and newValue of every binding. And after every Angular event, the famous $digest() loop will check the WatchList to see if something changed. These Angular events are ng-click, ng-change, $http completed ... The $digest() will loop as long as any oldValue differs from the newValue.

In the previous picture, it will notice that data-ref1 and data-ref2 has changed.

Conclusions

It's a little like the Egg and Chicken. You never know who starts, but hopefully it works most of the time as expected.

The other point is that you can understand easily the impact deep of a simple binding on the memory and the CPU. Hopefully Desktops are fat enough to handle this. Mobile phones are not that strong.

AngularJS handle data-binding mechanism with the help of three powerful functions : $watch(),$digest()and $apply(). Most of the time AngularJS will call the $scope.$watch() and $scope.$digest(), but in some cases you may have to call these functions manually to update with new values.

$watch() :-

This function is used to observe changes in a variable on the $scope. It accepts three parameters: expression, listener and equality object, where listener and equality object are optional parameters.

$digest() -

This function iterates through all the watches in the $scope object, and its child $scope objects
(if it has any). When $digest() iterates over the watches, it checks if the value of the expression has changed. If the value has changed, AngularJS calls the listener with new value and old value. The $digest() function is called whenever AngularJS thinks it is necessary. For example, after a button click, or after an AJAX call. You may have some cases where AngularJS does not call the $digest() function for you. In that case you have to call it yourself.

$apply() -

Angular do auto-magically updates only those model changes which are inside AngularJS context. When you do change in any model outside of the Angular context (like browser DOM events, setTimeout, XHR or third party libraries), then you need to inform Angular of the changes by calling $apply() manually. When the $apply() function call finishes AngularJS calls $digest() internally, so all data bindings are updated.

data binding:

What is data binding?

Whenever the user changes the data in the view , there occurs an update of that change in the scope model, and viceversa.

How is it possible?

Short answer : With the help of digest cycle.

Description : Angular js sets the watcher on the scope model, which fires the listener function if there is a change in the model.

$scope.$watch('modelVar' , function(newValue,oldValue){

//Dom update code with new value

});

So When and How is the watcher function called?

Watcher function is called as part of the digest cycle.

Digest cycle is called automatically triggered as part of angular js built in directives/services like ng-model , ng-bind , $timeout, ng-click and others.. that let you trigger the digest cycle.

Digest cycle function:

$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope 

i.e$rootScope.$apply()

Note: $apply() is equal to $rootScope.$digest() this means the dirty checking starts right from the root or top or the parent scope down to all the child $scopes in the angular js application.

The above features work in the browsers IE for the mentioned versions also just by making sure your application is angular js application which means you are using the angularjs framework script file referenced in the script tag.

Thank you.

共14条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐