Explication détaillée de la solution au problème d'invalidation de $watch dans angulaireJS

Cet article présente principalement la solution au problème d'échec de $watch d'angularJS. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Cet article présente la solution au problème d'échec de $watch d'angularJS. Partagez-le avec tout le monde et laissez-vous une note en passant.

La méthode $watch peut nous aider dans chaque domaine. . Surveillez les variables qu'il contient.

$watch Variable unique

Pour les variables ordinaires, telles que les nombres, les chaînes, etc., vous pouvez surveiller les modifications des variables en écrivant directement comme suit et en exécutant le correspondant de la fonction.

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

$watch multiple variables

Pour surveiller les changements dans plusieurs variables, si vous exécutez la même fonction, vous pouvez Ces variables sont converties en chaînes et séparées par des signes '+' pour la surveillance

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

$watch objet ou tableau

J'ai découvert qu'en utilisant les deux méthodes ci-dessus pour surveiller le tableau, j'ai constaté que même si le contenu du tableau changeait, la fonction anonyme n'était pas déclenchée. Plus tard, j'ai découvert que la fonction watch a en fait trois variables. Le premier paramètre est l'objet qui doit être surveillé. Le deuxième paramètre est la fonction qui doit être appelée lorsque l'objet surveillé change. , ce qui est par défaut le cas false.

Lorsque le troisième paramètre est faux, la fonction de surveillance surveille en fait l'adresse du tableau, et les modifications dans le contenu du tableau n'affecteront pas les modifications de l'adresse du tableau, donc la fonction de surveillance échoue.

La solution est d'ajouter le troisième paramètre comme vrai plus tard (bien sûr, vous pouvez également utiliser cette fonction d'écoute pour renvoyer le résultat sous forme de fonction anonyme de l'objet ou du tableau sous forme de JSON string.)

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

Ou écoutez une fonction anonyme qui renvoie l'objet ou le tableau sous la forme d'une chaîne JSON

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

$regardez le résultat renvoyé par la fonction

Lors de l'écriture de code, vous devez parfois surveiller si le résultat renvoyé par une fonction change, j'ai donc vérifié $ la montre surveille la fonction.

Méthode 1 : L'objet de surveillance est la chaîne "nom de la fonction ()", pensez à ajouter "()" !

//未完成的任务个数
$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;
});

Méthode 2 : Définissez-la comme fonction anonyme dans l'objet de surveillance et renvoyez la valeur de retour de la fonction à surveiller (sale...)

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

Annuler $watch

La consommation de performances de la montre semble être assez importante, donc pour les montres qui n'ont plus besoin d'être surveillées, pensez à les annuler régulièrement.

Quant à comment annuler... Je l'ai trouvé après une longue recherche

En fait, le résultat renvoyé par chaque fonction de montre est le deregisterWatch() fonction de cette montre

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

Donc, si vous souhaitez annuler la montre, enregistrez simplement la valeur de retour de $watch au début lorsque vous souhaitez annuler la montre. regarde, appelle-le.

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();
  }
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!