Angularjs Watch Input Binding Änderung für Array bei Verwendung von ControllerAs

Question

Ich habe eine AngularJs-Komponente mit Bindungen an Helden, die ein Array ist. Wie kann dieser Eingang für Array-Änderungen beobachtet werden? Ich habe versucht $scope.watch("heroes", ...) und $onChanges, aber nicht so weit.

bindings: { 
    heroes: '<', 
} 

Hier ist mein Plunker: https://plnkr.co/edit/J8xeqEQftGq3ULazk8mS?p=preview

Answer 1

Die ControllerAs-Struktur benötigt einen speziellen Watch-Ausdruck, da die Attribute nicht im $ scope enthalten sind.

//This one works and is the best one (> AngularJs 1.5) 
$scope.$watch("$ctrl.heroes.length", function() { 
    console.log("ControllerAs syntax"); // Triggers once on init 
}); 

//This one works as well 
var ctrl = this; 
$scope.$watch(() => { 
    return ctrl.heroes.length; 
}, (value) => { 
    console.log("complex watch"); // Triggers once on init 
}); 

Siehe Beispiel hier: https://plnkr.co/edit/J8xeqEQftGq3ULazk8mS?p=preview

Answer 2

Das Problem tritt auf, weil $ scope $ Uhr nicht standardmäßig tief Objekte beobachten.. Das bedeutet, da Sie Ihr Array nie zerstören/neu erstellen, ändert sich die Referenz nicht wirklich deshalb $scope.$watch sieht keine Änderung. Wenn Sie sich heroes.length angesehen hätten, würde sich dieses Primitiv ändern und Ihre $scope.$watch würde die entsprechende Abhörfunktion auslösen. Indem Sie $scope.$watch mit der true Option verwenden, sagen Sie der eckigen Maschine, alle Eigenschaften tief zu beobachten. Das ist ziemlich intensiv für große Objekte zu tun, weil $scope.$watchangular.copy

Änderungen verfolgen mit der Wenn Sie Winkel verwenden $scope.$watchCollection wäre, würde eine flache Kopie erstellen und weniger speicherintensiv sein würde. Also habe ich das Gefühl, Ihre 3 wichtigsten Optionen sind

Uhr heroes.length, fügen true oder verwenden $watchCollection

Ich glaube, dass heroes.length mit die beste Wahl wäre, so würde der Code aussehen

$scope.$watch('heroes.length',function(){});

Die anderen beiden Optionen werden im Folgenden beschrieben.

$scope.$watch('heroes',function(){ //do somthing },true)

oder

$scope.$watchCollection 

Der Vorteil watchCollection der Verwendung ist, dass es weniger Speicher, ein Objekt zu tief beobachten erfordert.

Shallow beobachtet die Eigenschaften eines Objekt und Feuer, wenn ein die Eigenschaften ändern (für Arrays bedeut dies, um die Array- Artikel beobachten; für Objekt-Karten, bedeutet dies, die Eigenschaften zu beobachten). Wenn eine Änderung erkannt wird, wird der Listener-Rückruf ausgelöst.

Die obj Kollektion wird über Standard $ Uhr Betrieb beobachtet und ist bei jedem Aufruf zu $ ​​suchte zu verdauen(), um zu sehen, ob alle Elemente hinzugefügt, entfernt oder verschoben worden sind. Der Listener wird immer dann aufgerufen, wenn sich innerhalb des Objekts geändert hat. Beispiele hierfür sind das Hinzufügen, Entfernen und Verschieben von Objekten, die zu einem Objekt oder Array gehören.