Obejrzyj wiele atrybutów $ scope

Czy istnieje sposób na subskrybowanie wydarzeń na wielu obiektach za pomocą $watch

Na przykład

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

Począwszy od AngularJS 1.3 istnieje nowa metoda wywołana $watchGroupdo obserwowania zestawu wyrażeń.

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

Począwszy od AngularJS 1.1.4 możesz używać $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
});

Przykład plunkera tutaj

Dokumentacja tutaj

$watch Pierwszy parametr może być również funkcją.

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

Jeśli dwie połączone wartości są proste, pierwszy parametr jest normalnie wyrażeniem kątowym. Na przykład firstName i lastName:

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

Oto rozwiązanie bardzo podobne do oryginalnego pseudokodu, które faktycznie działa:

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

EDYCJA: OK, myślę, że jest jeszcze lepiej:

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

Zasadniczo pomijamy krok Jsona, co na początku wydawało się głupie, ale bez niego nie działałoby. Klucz to często pomijany trzeci parametr, który włącza równość obiektów w przeciwieństwie do równości odniesienia. Wtedy porównania między naszymi utworzonymi obiektami tablicowymi faktycznie działają poprawnie.

Możesz użyć funkcji w $ watchGroup, aby wybrać pola obiektu w zakresie.

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

Dlaczego nie po prostu owinąć to w forEach?

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

To mniej więcej tyle samo, co zapewnienie funkcji dla połączonej wartości, bez faktycznego martwienia się o skład wartości .

Nieco bezpieczniejszym rozwiązaniem łączenia wartości może być użycie następujących $watchfunkcji:

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

lub

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

Pierwszy parametr $ watch może być wyrażeniem kątowym lub funkcją. Zobacz dokumentację dotyczącą $ scope. $ Watch . Zawiera wiele użytecznych informacji o tym, jak działa metoda $ watch: kiedy wywoływana jest funkcja watchExpression, sposób porównywania wyników przez kąt itp.

Co powiesz na:

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

Tutaj funkcja zostanie wywołana, gdy zmieni się zarówno wiek, jak i imię.

Angular wprowadzony $watchGroupw wersji 1.3, za pomocą którego możemy oglądać wiele zmiennych, z jednym $watchGroupblokiem $watchGroupprzyjmuje tablicę jako pierwszy parametr, w którym możemy uwzględnić wszystkie nasze zmienne do oglądania.

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