When discussing the merits of AngularJS, two-way data binding is often touted as a major benefit of Angular over other JS frameworks. Digging deeper, the documentation suggests this process is done through dirty-checking rather than through event-driven measures. At first, it seems that the digest-loop works by having a method fire off in the background at periodic intervals, checking all the $watch
es during each cycle. However, reading further, it seems that the digest-loop is actually triggered by rootScope.digest()
, which in turn is triggered by $.apply
, which is in turn triggered by an event(!), such as an onClick
event called through ng-click
.
But, how can this be? I thought Angular doesn't use change listeners. So how does the digest-loop really operate? Does Angular automatically kick-off the digest-loop internally, or is the digest-loop triggered by events? If the digest-loop is run automatically, how often does it run?
Some clarification points:
$.apply()
onKeyUp
somewhere?The digest loop is responsible to update DOM elements with the changes made to the model as well as executing any registered watcher functions. The $digest loop is fired when the browser receives an event that can be managed by the angular context. This loop is made up of two smaller loops.
It again performs the second cycle of dirty checking on the previous cycle, watches listeners. Because there may have been variables that have got changed by others. Minimum 2 iterations are performed and the maximum 10 can run. Although it is preferred to minimize the digest cycle for better performance.
Dirty checking is a simple process that boils down to a very basic concept: It checks whether a value has changed that hasn't yet been synchronized across the app. Our Angular app keeps track of the values of the current watches.
Angular digests are triggered - they don't happen through polling.
Code executes, after code is done, angular triggers a digest.
Example:
element.on('click', function() { $scope.$apply(function() { // do some code here, after this, $digest cycle will be triggered }); });
Angular will also trigger a $digest after the compile/link phase:
Compile > Link > Digest
And as to how many digest cycles are triggered? It depends on how soon the scope variables stabalise. Usually it takes at least 2 cycles to determine that.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With