AngularJS: Automatische Erkennung von Modelländerungen

Angenommen, ich wollte so etwas wie automatisch ausführen (wie das Speichern von Daten auf einem Server), wenn sich die Werte eines Modells ändern. Ist die einzige Möglichkeit, dies zu tun, indem Sie so etwas wie einstellen ng-change auf jeder Steuerung, die möglicherweise das Modell verändern könnte?

Das heißt, bei Ansichten ändern sich die Dinge direkt, wenn das Modell geändert wird, ohne dass explizit etwas angeschlossen werden muss. Gibt es eine Analogie zur Ausführung von Code, der auf einem Server gespeichert wird? Etwas wie

myModel.on('change', function() {
  $.post("/my-url", ...);
});

wie Sie vielleicht mit so etwas wie Backbone sehen.

In Ansichten mit {{}} und/oder ng-model, Angular wird eingerichtet $watch()es für Sie hinter den Kulissen.

Standardmäßig $watch vergleicht per Referenz. Wenn Sie den dritten Parameter auf setzen $watch zu true, Angular überwacht das Objekt stattdessen “flach” auf Änderungen. Für Arrays bedeutet dies, die Array-Elemente zu vergleichen, für Objektkarten bedeutet dies, die Eigenschaften zu beobachten. Das sollte also tun, was Sie wollen:

$scope.$watch('myModel', function() { ... }, true);

Aktualisieren: Angular v1.2 hat dafür eine neue Methode hinzugefügt, `$watchCollection():

$scope.$watchCollection('myModel', function() { ... });

Beachten Sie, dass das Wort “oberflächlich” verwendet wird, um den Vergleich zu beschreiben, und nicht “tief”, weil Referenzen nicht verfolgt werden — zB wenn das überwachte Objekt einen Eigenschaftswert enthält, der eine Referenz auf ein anderes Objekt ist, wird dieser Referenz nicht gefolgt, um zu vergleichen das andere Objekt.

Und wenn Sie Ihre Formularelemente entsprechend ihrem Status (geändert/nicht geändert) dynamisch formatieren oder testen möchten, ob sich einige Werte tatsächlich geändert haben, können Sie das folgende von mir entwickelte Modul verwenden:
https://github.com/betsol/angular-input-modified

Es fügt dem Formular und seinen untergeordneten Elementen zusätzliche Eigenschaften und Methoden hinzu. Damit können Sie testen, ob ein Element neue Daten enthält, oder sogar testen, ob das gesamte Formular neue nicht gespeicherte Daten enthält.

Sie können die folgende Uhr einrichten: $scope.$watch('myForm.modified', handler) und Ihr Handler wird aufgerufen, wenn einige Formularelemente tatsächlich neue Daten enthalten oder in den ursprünglichen Zustand zurückgesetzt wurden.

Außerdem können Sie verwenden modified Eigenschaft einzelner Formularelemente, um die per AJAX-Aufruf an einen Server gesendete Datenmenge tatsächlich zu reduzieren. Es müssen keine unveränderten Daten gesendet werden.

Als Bonus können Sie Ihr Formular per Call-to-Forms in den ursprünglichen Zustand zurückversetzen reset() Methode.

Die Demo des Moduls finden Sie hier:
http://plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview

Prost!

Erkennen Sie Änderungen in einem einzelnen Modell

$scope.$watchCollection('model1', function () {
    //...
}, true);

Erkennen Sie Änderungen in mehreren Modellen

$scope.$watchCollection('[model1, model2, model3]', function () {
    //...
}, true);