Detailed explanation of the solution to the $watch invalidation problem in angularJS

This article mainly introduces the solution to the $watch failure problem of angularJS. It has certain reference value. Interested friends can refer to it.

This article briefly discusses the solution to the $watch failure problem of angularJS. I would like to share it with you and leave a note for yourself

$watch method, which can help us in each scope. Monitor the variables in it.

$watch Single variable

For ordinary variables, such as numbers, strings, etc., you can monitor the changes in the variables by writing directly as follows, and execute the corresponding function.

$scope.count=1;
$scope.$watch('count',function(){
...
});

$watch multiple variables

For monitoring changes in multiple variables, if the same function is executed, these variables can be Convert variables to strings, separated by '+' signs for monitoring

//当count或page变化时，都会执行这个匿名函数
$scope.count=1;
$scope.page=1;
$scope.$watch('count + page',function(){
...
});

$watch object or array

It is found that when using the above two methods to monitor the array, you will find that even if the content of the array changes, the anonymous function is not triggered. Later, I discovered that the watch function actually has three variables. The first parameter is the object that needs to be monitored. The second parameter is the function that needs to be called when the monitored object changes. In fact, watch has a third parameter, which is by default case is false.

When the third parameter is false, the watch function actually monitors the address of the array, and changes in the contents of the array will not affect changes in the array address, so the watch function fails.

The solution is to add the third parameter to be true later (of course, you can also use this listening function to return the result as an anonymous function of the object or array in the form of a JSON string.)

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch('items',function(){...},true);

Or the anonymous function that returns the result as a JSON string in the form of the object or array

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch(function(){
  return JSON.stringify($scope.items);
},function(){...});

The return result of the $watch function

When writing code, sometimes it is necessary to monitor whether the result returned by a function changes, so I checked the $watch monitoring function Condition.

Method 1: The monitoring object is the string of "function name ()", remember to add "()"!

//未完成的任务个数
$scope.unDoneCount = function() {
  var count = 0;
  angular.forEach($scope.todoList, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};
//单选影响全选部分
$scope.$watch('unDoneCount()', function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

Method 2: Monitoring Set it as an anonymous function in the object and return the return value of the function to be monitored (confused...)

$scope.$watch(function(){
  return $scope.unDoneCount();//不要忘了(),要执行的啊~
}, function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

Cancel$watch

The performance consumption of watch seems to be quite large, so for watches that no longer need to be monitored, remember to cancel them regularly.

As for how to cancel...it took me a long time to find it

In fact, the result returned by each watch function is the deregisterWatch() function of this watch

//在chrome的控制台上，断点得到的$watch的返回值
function deregisterWatch() {
  arrayRemove(array, watcher);
  lastDirtyWatch = null;
}

So, if you want to cancel the watch, just save the return value of $watch at the beginning. When you want to cancel the watch, call it.

var count=1;
var unbingWatch=$scope.$watch('todoList',function(){
  console.log('todoList change');
  count++;
  //相当于在todoList变化了4次之后，就调用unbingWatch()取消这个watch
  //在第5次todoList改变的时候,就不会输出todoList change了。
  if(count>4){
    unbingWatch();
  }
});

The above is the detailed content of Detailed explanation of the solution to the $watch invalidation problem in angularJS. For more information, please follow other related articles on the PHP Chinese website!