Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does AngularJS's $watch function work?

I'm reading a lot about AngularJS nowadays, and I came across that magical $watch function. I understand how to use it, but I wonder how is it implemented in the background. Is it a time interval function? Or is it Angular calling this watch every statement executed?

I don't want to dig into the source code right now, and I would glad if one of you already know the answer and want to share his knowledge about the subject.

Thanks.

like image 438
SRachamim Avatar asked Sep 05 '13 11:09

SRachamim


People also ask

How are apply () Watch () Digest () different in AngularJS?

$apply() function will execute custom code and then it will call $scope. $digest() function forcefully to check all watch list variables and update variable values in view if any changes found for watch list variables. In most of the time angularjs will use $scope. watch() and $scope.

Why we use $apply in AngularJS?

In AngularJS, $apply() function is used to evaluate expressions outside of the AngularJS context (browser DOM Events, XHR). Moreover, $apply has $digest under its hood, which is ultimately called whenever $apply() is called to update the data bindings.

What is $scope in angular?

AngularJS Scope The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller.

When you inject a service into a controller?

When a service or controller needs a value injected from the factory, it creates the value on demand. It normally uses a factory function to calculate and return the value. Let's take an example that defines a factory on a module, and a controller which gets the factory created value injected: var myModule = angular.


1 Answers

All watches are evaluated (sometimes multiple times) every digest loop. The digest loop is entered as a result of some event, or calling $apply(). Watches are not called periodically based on a timer.

See https://docs.angularjs.org/guide/scope#integration-with-the-browser-event-loop

The browser's event-loop waits for an event to arrive. The event's callback gets executed... Once the callback executes, the browser leaves the JavaScript context and re-renders the view based on DOM changes. Angular modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and Angular execution context... Angular executes [some] stimulusFn(), which typically modifies application state. Angular enters the $digest loop. The loop is made up of two smaller loops which process $evalAsync queue and the $watch list. The $digest loop keeps iterating until the model stabilizes, which means that the $evalAsync queue is empty and the $watch list does not detect any changes. The $watch list is a set of expressions which may have changed since last iteration. If a change is detected then the $watch function is called which typically updates the DOM with the new value.

enter image description here

like image 58
Mark Rajcok Avatar answered Oct 20 '22 14:10

Mark Rajcok