De regarder plusieurs $portée des attributs

est-il possible de s'abonner à des événements sur des objets multiples en utilisant $watch

E. G.

$scope.$watch('item1, item2', function () { });
426
demandé sur Mosh Feu 2012-08-14 16:49:41
la source

11 ответов

à partir de AngularJS 1.3 il y a une nouvelle méthode appelée $watchGroup pour observer 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 
});
550
répondu Paolo Moretti 2014-05-06 16:51:28
la source

commençant par 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 plongeur ici

Documentation ici

288
répondu Răzvan Flavius Panda 2014-03-15 17:05:07
la source

$watch le premier paramètre peut aussi ê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, prénom et nom de famille:

$scope.$watch('firstName + lastName', function() {
  //stuff
});
117
répondu Andrew Joslin 2012-08-25 02:19:45
la source

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

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

EDIT: d'Accord, je pense que c'est encore mieux:

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

en gros, nous sautons l'étape json, qui semblait stupide au départ, mais ça ne marchait pas sans elle. La clé est le 3ème paramètre souvent omis qui s'appuie sur l'égalité de l'objet par opposition à l'égalité de référence. Ensuite, les comparaisons entre nos les objets tableau créés fonctionnent correctement.

70
répondu Karen Zilles 2013-02-09 05:14:58
la source

vous pouvez utiliser des fonctions dans $watchGroup pour sélectionner les champs d'un objet dans scope.

        $scope.$watchGroup(
        [function () { return _this.$scope.ViewModel.Monitor1Scale; },   
         function () { return _this.$scope.ViewModel.Monitor2Scale; }],  
         function (newVal, oldVal, scope) 
         {
             if (newVal != oldVal) {
                 _this.updateMonitorScales();
             }
         });
13
répondu Yang Zhang 2015-05-21 02:57:43
la source

pourquoi ne pas simplement l'envelopper dans un forEach ?

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

il est à peu près le même au-dessus de fournir une fonction pour la valeur combinée, sans avoir réellement à se soucier de la composition de la valeur .

12
répondu Erik Aigner 2013-06-26 16:55:16
la source

une solution légèrement plus sûre pour combiner des valeurs pourrait être d'utiliser la suivante comme votre $watch fonction:

function() { return angular.toJson([item1, item2]) }

ou

$scope.$watch(
  function() {
    return angular.toJson([item1, item2]);
  },
  function() {
    // Stuff to do after either value changes
  });
10
répondu guyk 2012-11-29 23:37:04
la source

$regarder le premier paramètre peut être expression angulaire ou fonction. Voir la documentation sur $ scope.$ regarder . Il contient beaucoup d'informations utiles sur la façon dont $watch method fonctionne: quand watchExpression est appelé, Comment angulaire compare les résultats, etc.

5
répondu Artem Andreev 2012-08-14 17:35:04
la source

Que diriez-vous de:

scope.$watch(function() { 
   return { 
      a: thing-one, 
      b: thing-two, 
      c: red-fish, 
      d: blue-fish 
   }; 
}, listener...);
4
répondu wacamo 2012-11-13 00:05:57
la source
$scope.$watch('age + name', function () {
  //called when name or age changed
});

ici la fonction sera appelée quand l'âge et la valeur du nom seront changés.

3
répondu Akash Shinde 2015-04-16 22:21:12
la source

Angular introduit $watchGroup dans la version 1.3 à l'aide de laquelle nous pouvons regarder plusieurs variables, avec un seul bloc $watchGroup $watchGroup prend le tableau comme premier paramètre dans lequel nous pouvons inclure toutes nos variables à surveiller.

$scope.$watchGroup(['var1','var2'],function(newVals,oldVals){
   console.log("new value of var1 = " newVals[0]);
   console.log("new value of var2 = " newVals[1]);
   console.log("old value of var1 = " oldVals[0]);
   console.log("old value of var2 = " oldVals[1]);
});
1
répondu Vinit Solanki 2018-04-02 11:47:16
la source