Let’s understand watchers through Digest cycle in Angular JS.
As we all know, Angular is a Model-View-Whatever framework. Whatever means it could be scope object, controller etc. So when any change happens in the model the view automatically gets updated with the help of a loop i.e. called Digest Cycle in Angular JS.
Let’s understand the digest cycle in the below simple steps,
- Suppose user performs some kind of activity in the application like clicking the button or something else, model value gets changed because of this activity. Angular does the comparison of both values; i.e., old value and new value. Angular calls digest cycle with the help of $watch() and $digest() functions itself in case of both the values are different. If both values are same, Angular does not do anything.
- Digest cycle goes through all the scope objects like Angular expressions or directives and checks which objects got affected due to the activity performed by the user. And it informs to Watchers about the change in the objects.
Watchers are the listeners which are attached to the scope objects and keep watching about the change. As any change happened, they are responsible to synchronize the view with the model.
- As watchers update the view as per the model value change, Digest cycle runs again to check that all the values are synced up. And this extra checking of Digest cycle is called Dirty Check.
Let’s understand $watch(), $digest() & $apply() in Angular JS,
$watch()
$watch() function provided by Angular is used to watch the changes in scope objects. Angular automatically attaches the watch expression to the objects under the scope. You can also attach a watch expression yourself like below,
- $scope.$watch('variable',function(newValue,oldValue){});
It accepts three parameters: expression, listener and equality object, where listener and equality object are optional parameters.
- $watch(watchExpression, listener, [objectEquality])
$digest()
$digest() function provided by Angular is used to reevaluate all the watchers in the scope object and its child scope objects and it may cause performance in the large scope hierarchy.
$digest() function is called whenever Angular thinks it is necessary. It does not call $digest() function on simple operations like on the button click or on an AJAX call.You can call digest yourself like below –
$apply()
$apply() is the function which is responsible to execute the entire list of watchers of all available scope in the application. Let’s understand this in detail,.Angular automatically updates only those model changes which are inside Angular context. When you do a change in any model outside of the Angular context (like setTimeout, browser DOM events or third party libraries), then you need to inform Angular of the changes by calling $apply() manually. When the $apply() function call finishes Angular calls $digest() internally, so all data bindings are updated.
Call explicitly $apply() function like below,
- $scope.$apply(function() {
-
- });
Note
To read my articles on Angular 2, please check out the below links,
Write to me in the comment box in case you have any questions or concerns.
Have a great day!