A brief discussion on the method of implementing two-way binding in angular.js $watch $digest $apply_AngularJS

Features in Angular.js, two-way binding.

What a magical function that allows changes in the view to be directly reflected in the data. Changes in the data are notified to the view in real time. How to do it?

This is thanks to the following 3 important methods of scope:

$watch
$digest
$apply

What are their differences? Let’s introduce them:

$watch
This is a listener that listens to data on the scope

Method description:

$scope.$watch('参数',function(newValue,oldValue){
 //逻辑处理
})

We created a listener above.
‘Parameter’ is an object (or an attribute of an object) under the $scope object. Note that this is in string form.

Suppose you want to monitor the $scope.name property.

$scope.$watch('name',function(newValue,oldValue){
 //逻辑处理
})

As in the above code, ‘name’ needs quotes

The parameter is followed by a callback function. The callback function parameter returns the monitored attribute, the new value after the change, and the old value before the previous change.

$digest

He is responsible for checking whether the data in the scope has changed. If a certain attribute changes, it will immediately notify the listener of this attribute (the listener registered by $watch), trigger the listener, and execute the callback function.

$apply

This method is very similar to $digest, $digest checks all data in the scope
$apply is equivalent to checking all data in rootScope, it will check all data from parent to child

$apply() == $rootScope.$digest()

The $apply() method has two forms.

The first one accepts a function as a parameter.
This triggers the $digest function and executes the function

in the parameter once

The second type does not accept any parameters.
This just triggers a $digest parent-to-child cycle

In Angular.js, $digest will not be called directly, but $scope.$apply() is used instead

I didn’t set the monitor, why can the view and data be bound in two directions

For example, a text box ng-model="name"
At this time, there is actually an attribute name under the $scope object to correspond to the two-way binding with the above view

How to achieve it?

In fact, when we define ng-model="name" or ng-bind="name" or {{name}}
At this time, angular.js will automatically set a listener for the "name" attribute on the $scope model:

$scope.$watch('name', function(newValue, oldValue) {
  //监听 name 属性的变化
});

It turns out that angular.js helps us automatically create a listener, so this property and $scope.name data will be two-way bound in real time.

Of course, sometimes you will find that the data has changed. But the UI is not refreshed. Is the two-way binding invalid?

No

It’s just that when the $scope model traverses the digest loop, your data has not been returned yet,

For example, when calling a method asynchronously, the data returned by callbac
For example, you set a scheduled trigger function in setTimeout, and then modify the model data
In short, the digest cycle of the $scope model was missed, resulting in the model not notifying the UI to refresh according to new data.

What should I do if I encounter such a problem?

We have to manually call digest to check the data in a loop to achieve two-way binding

As we have said above, usually do not call the digest method directly, but manually call the $apply method to indirectly trigger the $digest loop.

As follows:

setTimeout(function() {
 $scope.name= '一介布衣';
 $scope.$apply();
}, 2000);

The problem is here, it’s time to manually call the apply method

So far, angular.js has automatically implemented the $apply() method for some directives and services.

For example, ng-click, ng-model, $timeout service, $http service, etc.

After calling, angular.js will automatically call $apply() for us to achieve two-way data binding.