Comment $de regarder plusieurs changement de variable angulaire

Question

Comment $scope.$watch plusieurs variables dans Angulaire, et déclencheur de rappel lorsque l'un d'entre eux a changé.

$scope.name = ...
$scope.age = ...
$scope.$watch('???',function(){
    //called when name or age changed
})

Answer 1

---

Answer 2

$scope.$watch('age + name', function () {
  //called when name or age changed
});

Answer 3

Angulaire de 1,3 $watchGroup spécifiquement à cette fin:

https://docs.angularjs.org/api/ng/type/$rootScope.Champ#$watchGroup

Ce qui semble fournir le même résultat final comme un standard de $regarder sur un tableau d'expressions. Je l'aime parce qu'il permet l'intention plus claire dans le code.

Answer 4

Personne n'a mentionné l'évidence:

var myCallback = function() { console.log("name or age changed"); };
$scope.$watch("name", myCallback);
$scope.$watch("age", myCallback);

Cela pourrait signifier un peu moins d'interrogation. Si vous regardez les deux name + age (pour cela), et name (ailleurs), alors je suppose Angulaire efficacement regarde name deux fois pour voir si elle est sale.

C'est sans doute plus lisible d'utiliser la fonction de rappel par leur nom au lieu de l'in-lining. Surtout si vous pouvez lui donner un meilleur nom que dans mon exemple.

Et vous pouvez regarder les valeurs de différentes façons si vous avez besoin de:

$scope.$watch("buyers", myCallback, true);
$scope.$watchCollection("sellers", myCallback);

$watchGroup est agréable, si vous pouvez l'utiliser, mais aussi loin que je peux dire, il ne vous laisse pas regarder les autres membres du groupe, une collection ou avec l'objet de l'égalité.

Si vous avez besoin de les anciennes et les nouvelles valeurs des deux expressions à l'intérieur d'une fonction de rappel à appeler, puis peut-être les autres solutions proposées sont plus commodes.

Answer 5

Il y a de nombreuses façon de regarder plusieurs valeurs :

//angular 1.1.4
$scope.$watchCollection(['foo', 'bar'], function(newValues, oldValues){
    // do what you want here
});

ou version récente

//angular 1.3
$scope.$watchGroup(['foo', 'bar'], function(newValues, oldValues, scope) {
  //do what you want here
});

officiel doc : https://docs.angularjs.org/api/ng/type/$rootScope.Portée