Wie man ein Array auf Änderungen in AngularJS überwacht

Question

Im Grunde möchte ich das Äquivalent zum Binden von 'add' und 'remove'-Ereignissen in Backbones Collections. Ich sehe im Grunde keine Möglichkeit, dies in AngularJS zu tun, und der aktuelle Workaround, für den wir uns entschieden haben, ist, das $watch() auf die Länge des Arrays zu setzen und das gesamte Array manuell zu differenzieren/neu zu berechnen. Ist das wirklich das, was die coolen Kids tun?

Bearbeiten: Speziell das Überwachen der Länge des Arrays bedeutet, dass ich nicht leicht herausfinden kann, welches Element geändert wurde, Ich muss manuell "differenzieren".

Answer 1

Ich denke, die Verwendung von $watch ist eine gute Lösung, aber $watchCollection kann besser für dich sein. $watchCollection führt keinen tiefen Vergleich durch und überwacht nur die Array-Modifizierung wie Einfügen, Löschen oder Sortieren (keine Aktualisierung von Elementen).

Zum Beispiel, wenn du ein Attribut order mit der Reihenfolge des Arrays synchronisieren möchtest:

$scope.sortableItems = [
    {order: 1, text: 'foo'},
    {order: 2, text: 'bar'},
    {order: 3, text: 'baz'}
];

$scope.$watchCollection('sortableItems', function(newCol, oldCol, scope) {
    for (var index in newCol) {
        var item = newCol[index];
        item.order = parseInt(index) + 1;
    }
});

Aber für dein Problem weiß ich nicht, ob es eine bessere Lösung gibt, als das Array manuell zu durchsuchen, um die Änderung zu identifizieren.

Answer 2

Der Weg, ein Array in Angular zu beobachten, lautet $watch(array, function(){}, true)

Answer 3

Ich würde Kindbereiche erstellen und sie individuell überwachen. Hier ist ein Beispiel:

$scope.myCollection = [];
var addChild = function()
{
  var Child = $scope.$new();
  Child.name = 'Dein Name hier';

  Child.$watch('name', function(newValue) {
     // .... etwas tun, wenn das Attribut 'name' geändert wird ...
  });

  Child.$on('$destroy', function() {
    //... etwas tun, wenn dieses Kind zerstört wird 
  });

  $scope.myCollection.push(Child); // das Kind dem Sammlungsarray hinzufügen

};

// Übergeben Sie das Element als Parameter an diese Methode,
// tun Sie dies innerhalb eines ngRepeat der Sammlung in Ihren Ansichten
$scope.deleteButtonClicked = function(item)
{
  var index = $scope.myCollection.indexOf(item); // erhält den Index des Elements
  delete $scope.myCollection[index]; // entfernt das Element im Array
  item.$destroy(); // zerstört die ursprünglichen Elemente
}

Answer 4

Bitte erzähle mehr über deinen Anwendungsfall. Eine der Lösungen zur Verfolgung der Elementpersistenz besteht darin, die ngRepeat-Direktive mit einer benutzerdefinierten Direktive zu verwenden, die das $destroy-Ereignis des Elements überwacht:

Answer 5

Vielleicht ist die Lösung, die Sammlungsklasse zu erstellen (ähnlich wie es Backbone tut), und Sie können auch ziemlich einfach in Ereignisse eingreifen.

Die Lösung, die ich hier gemacht habe, ist nicht wirklich umfassend, aber sollte Ihnen eine allgemeine Anleitung geben, wie dies möglicherweise gemacht werden könnte.

http://beta.plnkr.co/edit/dGJFDhf9p5KJqeUfcTys?p=preview