2

How does AngularJS implements the 2-way data binding? The view to model update is understandable i.e. it can be achieved through the JS listeners but I wanted to understand the model to view update? As at the core angular models are js variables, so how does the Angular listen to the change in js vars?

I know that each model has a watch which compare the new value with the old one but what triggers this check(the js implementation)?

Does it uses Javascripts watchers or a time interval for checking?

daan.desmedt
  • 3,752
  • 1
  • 19
  • 33
Mayank
  • 259
  • 2
  • 16
  • have a look at [data-binding in angular js](http://stackoverflow.com/questions/9682092/how-does-data-binding-work-in-angularjs) – Uday Feb 15 '17 at 11:06
  • Yes, I have read it but the part I didn't get is what triggers this dirty checking. Dirty-checking is done through digest cycle, right? But once a model is changed how does the angular trigger the digest cycle? – Mayank Feb 15 '17 at 11:11
  • The $digest() function is called whenever Angular JS thinks it is necessary like any event has been executed or after an ajax call return. But there might be some cases where AngularJS does not call the $digest() function for you and data bindings do not upate the displayed values. In that case you have to do this manually by calling $scope.$digest() or $scope.$apply(). – Uday Feb 15 '17 at 11:37

1 Answers1

3

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 ($scope, directive, ...), every time the event fires, $apply is called which internally calls $digest which will trigger the re-evaluation of all the $watches.

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 events

  • Input directives+ngModel, ngClick, ngMouseOver etc.
  • $http and $resource
  • $location
  • $timeout

enter image description here

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.

daan.desmedt
  • 3,752
  • 1
  • 19
  • 33
  • I am not asking about the angular implementation, I wanted to understand how angular implements it through JS. If there's a change in view side we have the JS event listeners like onChnage etc. but I wanted to know how its done if a model is changed i.e. after any ajax call if the model is changed how does angular know the model is changed and its time to call $apply? – Mayank Feb 15 '17 at 11:53
  • Allright, I must of misunderstood the context of your question. I've updated my answer with some additional information. I don't know if this answers your question more to the point? Thanks for pointing it out! :) – daan.desmedt Feb 15 '17 at 12:08