AngularJS - Understanding digest cycle (digest phase or digest process or digest loop)
254 2 26882
-What is AngularJS Watch and Watch list
-How are scopes associated to Watch list
-What is Angular Context
-What is digest cycle
-What are digest iterations (min and max)
-When are Watch listeners executed
-What is digest process / phase in Angular JS
-When does digest process kick in
-What events may kick in digest process
-How are digest process / iterations, watch list and scope related
-At what point DOM gets updated / rendered
-What is Event loop
By anonymous 2017-09-20
I found very in-depth videos which cover
$digest and digest cycles in:
Following are a couple of slides used in those videos to explain the concepts (just in case, if the above links are removed/not working).
In the above image, "$scope.c" is not being watched as it is not used in any of the data bindings (in markup). The other two (
$scope.b) will be watched.
From the above image: Based on the respective browser event, AngularJS captures the event, performs digest cycle (goes through all the watches for changes), execute watch functions and update the DOM. If not browser events, the digest cycle can be manually triggered using
By anonymous 2017-09-20
Angular defines a concept of a so called digest cycle. This cycle can be considered as a loop, during which Angular checks if there are any changes to all the variables watched by all the $scopes. So if you have $scope.myVar defined in your controller and this variable was marked for being watched, then you are explicitly telling Angular to monitor the changes on myVar in each iteration of the loop.
Basically AngularJS binds event handlers to any element that interacts with Angular (
directive, ...), every time the event fires,
$apply is called which internally calls
$digest which will trigger the re-evaluation of all the
AngularJS made a smart assumption that model changes happen only on user interaction / events:
- DOM events
- XHR responses firing callbacks
- Browser's location changes
- Timers (setTimout, setInterval) firing the callbacks
Or trigger on certain
- Input directives+ngModel, ngClick, ngMouseOver etc.
- $http and $resource
When one of these 'assumptions' is triggered, the digest cycle is kicked off:
To quote Pawel Kozlowski, Mastering Web Application Development with AngularJS:
AngularJS does not use any kind of polling mechanism to periodically check for model changes
More detailed insights
Have a look at https://www.youtube.com/watch?v=SYuc1oSjhgY for a really deep dive into the digest cycle.