Beobachten Sie mehrere $ scope-Attribute

Gibt es eine Möglichkeit, Ereignisse für mehrere Objekte mit zu abonnieren? $watch

Z.B

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

Ab AngularJS 1.3 gibt es eine neue Methode $watchGroupzum Beobachten einer Reihe von Ausdrücken.

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

Ab AngularJS 1.1.4 können Sie Folgendes verwenden $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
});

Plunker Beispiel hier

Dokumentation hier

$watch Der erste Parameter kann auch eine Funktion sein.

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

Wenn Ihre beiden kombinierten Werte einfach sind, ist der erste Parameter normalerweise nur ein Winkelausdruck. Zum Beispiel Vorname und Nachname:

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

Hier ist eine Lösung, die Ihrem ursprünglichen Pseudocode sehr ähnlich ist und tatsächlich funktioniert:

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

EDIT: Okay, ich denke das ist noch besser:

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

Grundsätzlich überspringen wir den JSON-Schritt, der anfangs dumm schien, aber ohne ihn nicht funktioniert hat. Der Schlüssel ist der häufig ausgelassene dritte Parameter, der die Objektgleichheit im Gegensatz zur Referenzgleichheit aktiviert. Dann funktionieren die Vergleiche zwischen unseren erstellten Array-Objekten tatsächlich richtig.

Sie können Funktionen in $ watchGroup verwenden, um Felder eines Objekts im Bereich auszuwählen.

        $scope.$watchGroup(
        [function () { return _this.$scope.ViewModel.Monitor1Scale; },   
         function () { return _this.$scope.ViewModel.Monitor2Scale; }],  
         function (newVal, oldVal, scope) 
         {
             if (newVal != oldVal) {
                 _this.updateMonitorScales();
             }
         });

Warum nicht einfach einpacken forEach?

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

Es ist ungefähr der gleiche Aufwand wie das Bereitstellen einer Funktion für den kombinierten Wert, ohne sich um die Wertzusammensetzung kümmern zu müssen .

Eine etwas sicherere Lösung zum Kombinieren von Werten könnte darin bestehen, Folgendes als $watchFunktion zu verwenden:

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

oder

$scope.$watch(
  function() {
    return angular.toJson([item1, item2]);
  },
  function() {
    // Stuff to do after either value changes
  });

Der Parameter $ watch first kann ein Winkelausdruck oder eine Funktion sein. Siehe Dokumentation zu $ scope. $ Watch . Es enthält viele nützliche Informationen zur Funktionsweise der $ watch-Methode: Wenn watchExpression aufgerufen wird, wie eckig die Ergebnisse verglichen werden usw.

wie wäre es mit:

scope.$watch(function() { 
   return { 
      a: thing-one, 
      b: thing-two, 
      c: red-fish, 
      d: blue-fish 
   }; 
}, listener...);

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

Hier wird die Funktion aufgerufen, wenn sowohl Alter als auch Namenswert geändert werden.

$watchGroupIn Version 1.3 eingeführter Winkel, mit dem wir mehrere Variablen überwachen können, wobei ein einzelner $watchGroupBlock $watchGroupdas Array als ersten Parameter verwendet, in den wir alle zu überwachenden Variablen aufnehmen können.

$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]);
});