$ watch wird bei Array-Änderung nicht ausgelöst

Question

Ich versuche herauszufinden, warum meine $watch nicht ausgelöst wird. Dies ist ein Ausschnitt aus dem entsprechenden Controller:

$scope.$watch('tasks', function (newValue, oldValue) { 
    //do some stuff 
    //only enters here once 
    //newValue and oldValue are equal at that point 
}); 

$scope.tasks = tasksService.tasks(); 

$scope.addTask = function (taskCreationString) { 
    tasksService.addTask(taskCreationString);//modifies tasks array 
}; 

Auf meiner Sicht ist tasks eindeutig korrekt aktualisiert, da ich wie so gebunden seine Länge haben:

<span>There are {{tasks.length}} total tasks</span> 

Was bin ich?

Answer 1

Versuchen Sie $watch('tasks.length', ...) oder $watch('tasks', function(...) { ... }, true).

Standardmäßig überprüft $watch nicht auf Objektgleichheit, sondern nur als Referenz. So wird $watch('tasks', ...) immer einfach die gleiche Array-Referenz zurückgeben, die sich nicht ändert.

Update: Angular v1.1.4 fügt eine $watchCollection() Methode, um diesen Fall zu behandeln:

Shallow-Uhren, die Eigenschaften eines Objekts und ausgelöst wird, wenn eine der Eigenschaften ändern (dies impliziert Arrays das Array beobachten Gegenstände, für Objektkarten bedeutet dies, die Eigenschaften zu beobachten). Wenn eine Änderung festgestellt wird, wird der Rückruf listener ausgelöst.

Answer 2

Sehr gute Antwort von @Mark. Zusätzlich zu seiner Antwort gibt es eine wichtige Funktion der $watch Funktion, die Sie beachten sollten.

Mit der $watch Funktionsdeklaration wie folgt:

$watch(watch_expression, listener, objectEquality) 

Die $watchZuhörer Funktion nur aufgerufen, wenn der Wert von dem aktuellen Uhr Ausdruck (in Ihrem Fall ist es 'tasks') und der vorherige Aufruf zu Uhr Ausdruck sind nicht gleich. Angular speichert den Wert des Objekts für den späteren Vergleich. Aus diesem Grund hat das Beobachten komplexer Optionen nachteilige Auswirkungen auf Speicher und Leistung. Grundsätzlich gilt der einfachere Uhr Ausdruck Wert desto besser.

Answer 3

würde ich empfehlen,

$scope.$watch('tasks | json', ...) 

versuchen, dass alle Änderungen an den tasks Array fangen, da sie die serialisierten Array als String vergleichen.

Answer 4

Für eindimensionale Arrays können Sie $watchCollection verwenden

$scope.names = ['igor', 'matias', 'misko', 'james']; 
$scope.dataCount = 4; 

$scope.$watchCollection('names', function(newNames, oldNames) { 
    $scope.dataCount = newNames.length; 
});