AngularJS $watch(), $digest() and $apply() in $scope are the core functions of AngularJS. You must understand these functions when learning AngularJS.
When binding the variable in $scope to the view, AngularJS automatically creates a "Watch" internally. "Watch" is used to listen for changes to variables in AngularJS scope. You can create "Watch" by calling the $scope.$watch() method.
The $scope.$digest() function will loop through all watches and check whether the variables in the $scope they are listening to have changed. If the variable changes, the corresponding listening function of the variable will be called. Listening functions can implement many operations, such as letting the text text in html display the latest variable value. It can be seen that $scope.$digest can trigger data binding updates.
In most cases, AngualrJS will automatically call the $scope.$watch() and $scope.$digest() functions, but in some cases we need to call them manually, so it is necessary to understand how they work.
The $scope.$apply() function will execute some code first, and then call $scope.$digest(). All watches will be detected once, and the corresponding listening function will be executed. $scope.$apply() is useful when AngularJS integrates with other javascript code.
Next, we will explain in detail $watch(), $digest() and $apply().
$watch()
$watch(watchExpression, listener, [objectEquality])
watchExpression: Listen to the object, which can be string or function(scope){}
listener: The callback function function(newVal, oldVal, scope){}
objectEquality: Whether to listen deeply, if set to true, it tells Angular to check the changes in each property in the monitored object. If you want to monitor individual elements of an array or attributes of an object instead of a normal value, then you should use it. (Default: false)
$digest()
Detect all watches in the current scope and sub scope, because the listening function will modify the model (variable in scope) during execution, and $digest() will be called until the model does not change again. When called more than 10 times, $digest() will throw an exception "Maximum iteration limit exceeded" to prevent the program from entering a dead loop.
$apply()
$apply([exp])
exp: string or function(scope){}
The pseudo-code diagram of $apply() life cycle is as follows
function $apply(expr) {
try {
return $eval(expr);
} catch (e) {
$exceptionHandler(e);
} finally {
$root.$digest();
}
}
Example
Let's use an example to illustrate $watch, $digest and $apply.
<script>
var module = ("myapp", []);
var myController1 = ("myController", function($scope) {
$ = { time : new Date() };
$ = function() {
$ = new Date();
}
("updateTimeButton")
.addEventListener('click', function() {
("update time clicked");
$ = new Date();
});
});
</script>
<body ng-app="myapp">
<div ng-controller="myController">
{{}}
<br/>
<button ng-click="updateTime()">update time - ng-click</button>
<button >update time</button>
</div>
</body>
This code will be bound to the HTML and displayed. At the same time, this binding will automatically create a watch to listen for changes to $. In addition, there are 2 buttons here. The first button calls the $ method through ng-click Directive. After that, AngularJS will automatically execute $scope.$digest() to display the latest time into HTML. The second button is to add a click event through the javascript code to update the time in HTML. But the second button does not work. Its solution is to manually call the $scope.$digest() method at the end of the click event, as follows:
("updateTimeButton")
.addEventListener('click', function() {
("update time clicked");
$ = new Date();
$scope.$digest();
});
Another solution is to call $scope.$apply(), as follows:
("updateTimeButton")
.addEventListener('click', function() {
$scope.$apply(function(){
("update time clicked");
$ = new Date();
}
);
});
The above is all about this article, I hope it will be helpful to everyone's learning.