how does the binding and digesting work in AngularJS?

angularjs

One thing that sets apart AngularJS from other JavaScript-MVC frameworks is it's ability to echo bound values from JavaScript into HTML using bindings. Angular does this "automatically" when you assign any value to the $scope variable.

But how automatic is this? Sometimes, Angular won't pick up on the change so I need to call $scope.$apply() or $scope.$digest() to inform angular to pickup the change. Sometimes when I run either of those methods then it throws an error and says that a digest is already in progress.

Since the bindings (anything inside {{ }} braces or ng-attributes) are echoed with eval then does this mean that Angular is constantly polling the $scope object to look for changes and then performing an eval to push those changes to the DOM/HTML? Or has AngularJS somehow figured out the use magic variables which fire events which are triggered when a variable value changes or is assigned? I've never heard of it being fully supported by all browsers, so I doubt it.

How does AngularJS keep track of it's bindings and scope variables?

I found the section in docs.angularjs.org/guide/concepts#runtime that starts with "Here is the explanation of how the Hello world example achieves the data-binding effect" helpful.

This post is also useful if you haven't seen it yet: stackoverflow.com/questions/9682092/databinding-in-angularjs/…

Comment on your first declarative paragraph: Angular's "ability to echo bound values from JavaScript into HTML using bindings" sounds like a confusing way to say "data binding". And at this point in time it doesn't really set Angular apart from other frameworks like Ember or React. The question is useful, don't get me wrong. But that first paragraph is just an opinion which I happen to disagree with -- I would edit the question but I don't feel authoritative enough.

Artem Andreev

In addition to the documentation section found by Mark I think we can try to enumerate all possible sources of change.

User interaction with HTML inputs ('text', 'number', 'url', 'email', 'radio', 'checkbox'). AngularJS has inputDirective. 'text', 'number', 'url' and 'email' inputs bind listener handler for 'input' or 'keydown' events. Listener handler calls scope.$apply. 'radio' and 'checkbox' bind similar handler for click event. User interaction with select element. AngularJS has selectDirective with similar behavior on 'change' event. Periodical changes using $timeout service that also do $rootScope.$apply(). eventDirectives (ngClick, etc) also use scope.$apply. $http also uses $rootScope.$apply(). Changes outside AngularJS world should use scope.$apply as you know.

+1 for point "5. $http also uses $rootScope.$apply()." Argh. Does anybody knows why they does this? This is very annoying...

Community

As you found out it's not polling, but using it's internal execution loop so that's why you need to use $apply() or $digest() to kick things into motion.

Miško's explanation is quite thorough, but the bit missing is that Angular is just trying to make $scope get back to a clear internal state whenever anything happens within its own context. This might take quite some bouncing around between model states, so that's also why you can't rely on $watch() firing only once and also why you should be careful with manually setting up relations between models or you'll end up in endless circular refreshes.

So how does the $apply(someFn) work? Will the contents of someFn be executed when the apply iteration is executed?

With $apply the code gets executed in the Angular scope, which is just to notify it that you want the changes to be digested, see: docs.angularjs.org/api/ng.$rootScope.Scope#$apply

In case you want to prevent colliding with $digest, you have to check for $phase: groups.google.com/d/msg/angular/FJwxJ-XbJaE/1NavZNQBhf4J

how does the binding and digesting work in AngularJS?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US