Surveiller plusieurs attributs de $scope

Question

Existe-t-il un moyen de s'abonner à des événements sur plusieurs objets en utilisant la fonction $watch

Par exemple

$scope.$watch('item1, item2', function () { });

Answer 1

À partir d'AngularJS 1.3, il y a une nouvelle méthode appelée $watchGroup pour l'observation d'un ensemble d'expressions.

$scope.foo = 'foo';
$scope.bar = 'bar';

$scope.$watchGroup(['foo', 'bar'], function(newValues, oldValues, scope) {
  // newValues array contains the current values of the watch expressions
  // with the indexes matching those of the watchExpression array
  // i.e.
  // newValues[0] -> $scope.foo 
  // and 
  // newValues[1] -> $scope.bar 
});

Answer 2

À partir d'AngularJS 1.1.4 vous pouvez utiliser $watchCollection :

$scope.$watchCollection('[item1, item2]', function(newValues, oldValues){
    // do stuff here
    // newValues and oldValues contain the new and respectively old value
    // of the observed collection array
});

Exemple de Plunker aquí

Documentation aquí

Answer 3

$watch Le premier paramètre peut également être une fonction.

$scope.$watch(function watchBothItems() {
  return itemsCombinedValue();
}, function whenItemsChange() {
  //stuff
});

Si vos deux valeurs combinées sont simples, le premier paramètre est juste une expression angulaire normalement. Par exemple, firstName et lastName :

$scope.$watch('firstName + lastName', function() {
  //stuff
});

Answer 4

Voici une solution très similaire à votre pseudo-code original qui fonctionne réellement :

$scope.$watch('[item1, item2] | json', function () { });

EDIT : Ok, je pense que c'est encore mieux :

$scope.$watch('[item1, item2]', function () { }, true);

En gros, nous sautons l'étape du json, ce qui semblait stupide au départ, mais ça ne marchait pas sans. La clé est le 3ème paramètre souvent omis qui active l'égalité des objets par opposition à l'égalité des références. Ainsi, les comparaisons entre les objets de notre tableau créé fonctionnent correctement.

Answer 5

Pourquoi ne pas simplement l'envelopper dans un forEach ?

angular.forEach(['a', 'b', 'c'], function (key) {
  scope.$watch(key, function (v) {
    changed();
  });
});

C'est à peu près la même surcharge que de fournir une fonction pour la valeur combinée, sans avoir à se soucier de la composition de la valeur .