$ Watch (), $ digest () and $ apply () in AngularJS differentiate _ AngularJS

This article mainly introduces the difference between $ watch (), $ digest () and $ apply () in AngularJS. If you are interested, refer to $ watch () in AngularJS $ scope (), $ digest () and $ apply () are core functions of AngularJS. To learn about AngularJS, you must understand these functions.

When you bind a 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 call $ scope. $ watch () to create "Watch ".

$ Scope. $ digest () function cyclically accesses all watches and checks whether the variables in the $ scope it listens to change. If the variable changes, the listener function corresponding to the variable is called. The listener function can perform many operations, such as displaying the latest variable values in text in html. As you can see, $ scope. $ digest triggers data binding updates.

In most cases, AngualrJS automatically calls $ 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.

$ Scope. $ apply (): This function executes some code first, and then calls $ scope. $ digest (). All watches will be detected once, and the corresponding listening function will also be executed. $ Scope. $ apply () is useful when AngularJS is integrated with other javascript code.

Next we will explain $ watch (), $ digest (), and $ apply () in detail ().

$ Watch ()
$ Watch (watchExpression, listener, [objectEquality])

WatchExpression: Listener object, which can be string or function (scope ){}

Listener: the callback function (newVal, oldVal, scope) executed when the listener object changes ){}

ObjectEquality: whether to listen in depth. If it is set to true, it tells Angular to check the changes of each attribute in the Monitored object. If you want to monitor the attributes of individual elements or objects of an array instead of a common value, you should use it. (Default value: false)

$ Digest ()
Checks the current scope and all watches in the subscope, because the listener function modifies the model (variable in scope) during execution, and $ digest () is called until the model does not change. When the number of calls exceeds 10, $ digest () throws an exception "Maximum iteration limit exceeded" to prevent the program from entering an endless loop.

$ Apply ()
$ Apply ([exp])

Exp: string or function (scope ){}

$ Apply () lifecycle pseudocode is as follows:

function $apply(expr) { try {  return $eval(expr); } catch (e) {  $exceptionHandler(e); } finally {  $root.$digest(); }}

Example
Here is an example to illustrate $ watch, $ digest, and $ apply.

《script》var module = angular.module("myapp", []);var myController1 = module.controller("myController", function($scope) {  $scope.data = { time : new Date() };  $scope.updateTime = function() {    $scope.data.time = new Date();  }     document.getElementById("updateTimeButton")      .addEventListener('click', function() {    console.log("update time clicked");    $scope.data.time = new Date();  });});《script》
  {{data.time}}   
  update time - ng-click  update time

This code will bind $ scope. data. time to HTML and automatically create a watch to listen for changes in $ scope. date. time. In addition, there are two buttons. The first button is to call $ scope through ng-click Directive. the updateTime method, AngularJS will automatically execute $ scope. $ digest () displays the latest time in HTML. The second button is to add a click event through javascript code to update the time in HTML. However, the second button cannot work. The solution is to manually call $ scope. $ digest () at the end of the event, as shown below:

document.getElementById("updateTimeButton")    .addEventListener('click', function() {  console.log("update time clicked");  $scope.data.time = new Date();  $scope.$digest();});

Another solution is to call $ scope. $ apply () as follows:

document.getElementById("updateTimeButton")    .addEventListener('click', function() {  $scope.$apply(function(){      console.log("update time clicked");      $scope.data.time = new Date();    }  );});

The above is all the content of this article, hoping to help you learn.