Brief analysis of $watch, $apply and $digest (angular)

Preface

People who have known angular know that a big feature of angular is two-way data binding. The so-called bidirectional data binding, that is, when any data in the view changes, its corresponding scope model is automatically updated, and when the scope model changes, the data in view is updated to the most recent value. So how does it work, $watch how it works, what $apply and $digest are used to do, and let's explore.

browser events and angular extensions

In a standard browser process, when an event is triggered (such as a click of a button), the browser executes the callback function for that event, which is entered into the JavaScript execution environment when the callback is executed. When the callback finishes executing, exit the JavaScript execution Environment and refresh the view. Angular on this basis to create a own execution environment and event processing cycle, only in the Angularjs execution environment to run operations, to enjoy the ANGULARJS provides data binding, exception handling, resource management and other functions and services. Angular and browser event loops interact as follows:

Here's an example to parse the angular execution process:

Html

<button ng-click= "Changedata ()" > Click </button><p>{{data}}</p>

Controller

$scope. changedata=function() {    $scope. Data=1;}

(1) The "click" button above is bound to the angular click event, when the user clicks the button, angular will wrap the Changedata function and pass it to $scope. $apply (), by calling $scope. $apply (Changedata), Go to the angular execution environment and perform changedata in the angular environment.

(2) Angularjs into the $digest cycle. This loop is made up of two small loops: $evalAsync queue and $watch list. The $scope.data is modified in the execution changedata,changedata, and angular traverses the entire $watch list, detects changes in the data value in the $watch list, and then launches the $digest cycle again;

(3) until the $watch list is detected no longer has any changes, Angularjs's $digest loop ends, leaving the Angularjs and JavaScript execution environment.

(4) The browser re-renders the changed data.

$watch

When we bind a $scope object in the UI element, we add a $watch to the $watch list and add only one $watch to the $watch list for all UI elements that are bound to the same $scope object. Look at the following code

(1)

Html

<input ng-model= "name" type= "text" placeholder= "Your name" ><input ng-model= "age"  type= "text" Placeholder= "Your age" >
There are two of the same $scope.name and a $scope.pass, so add two $watch to the $watch list.
(2)
Html
<p>{{a}}</p>
Controller
$scope. a= ' Dataa '; $scope. A= ' datab ';
Although there are two $scope objects defined in the controller, only one $scope.a is bound to the UI element, so only a $watch is added to the $watch list.
$digest
When the browser receives an event that can be handled by the angular execution environment (such as Ng-click, ng-keypress), the $digest loop is triggered. This cycle is composed of two small loops. One handles the Evalasync queue, and the other handles the $watch queue.
In the $digest loop, angular iterates through the complete list of $watch, and when all $watch is checked, the loop fires again as soon as any of the $watch values change, continuing through the $watch list until it detects no more changes. Why do you want to run this cycle again? Because if you update a value in the $watch list to update another value, angular will not detect the update unless you run the loop again. See the example below
Html
<button ng-click= "Changenum ()" > Click </button><p>{{num1}}</p><p>{{num2}}</p>
Controller
$scope. Num1=1, $scope. num2= $scope. num1+2; $scope. changenum=function() {    $ Scope.num1=2;}
When we click on the button, change the NUM1 data, because the NUM2 data is affected by NUM1 data, if you do not start the $digest loop again, angular will not detect the NUM2 data updates.
This is known as dirty value detection. This will ensure that each model is no longer changing. Remember that if the loop is more than 10 times, it will throw an exception to prevent an infinite loop. When the $digest loop is finished, the DOM changes accordingly.
$apply
The $apply () function enables events to be executed in the execution environment of angular. So the question is, when should I use $apply () and when should it not be used?
Angular provides any instruction available in the view (such as Ng-click, ng-keypress), angular built-in services (such as $http, $timeout, etc.) and automatically calls $apply () when used. Therefore, we do not have to manually call $apply ();
When we handle events manually, using third-party frameworks (such as jquery, Facebook API), or calling settimeout (), they do not call $apply (), so events cannot be executed in the angular execution environment, $ The digest loop cannot detect changes to view data in the event, and views cannot be updated. This time, we need to call $apply () manually;
Brief analysis of $watch, $apply and $digest (angular)