AngularJS: Ändert automatisch Modelländerungen

Angenommen, ich wollte so etwas wie automatisch Code ausführen (z. B. Daten auf einem Server speichern), wenn sich die Werte eines Modells ändern. Ist die einzige Möglichkeit, dies zu tun, indem Sie ng-changefür jedes Steuerelement etwas festlegen, das möglicherweise das Modell ändern könnte?

Das heißt, mit Ansichten ändern sich die Dinge richtig, wenn das Modell geändert wird, ohne dass explizit etwas angeschlossen werden muss. Gibt es ein Analogon 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 Rückgrat sehen.

In Ansichten mit {{}}und / oder ng-Modell richtet Angular $watch()es hinter den Kulissen für Sie ein.

Standardmäßig $watchwird als Referenz verglichen. Wenn Sie den dritten Parameter einstellen $watchzu true, Angular wird stattdessen „flach“ sehen Sie das Objekt für Änderungen. Für Arrays bedeutet dies, die Array-Elemente zu vergleichen, für Objektzuordnungen bedeutet dies, die Eigenschaften zu überwachen. Das sollte also tun, was Sie wollen:

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

Update : Angular v1.2 hat eine neue Methode hinzugefügt: `$ watchCollection () :

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

Beachten Sie, dass das Wort "flach" eher zur Beschreibung des Vergleichs als "tief" verwendet wird, da Referenzen nicht befolgt werden. Wenn das überwachte Objekt beispielsweise einen Eigenschaftswert enthält, der auf ein anderes Objekt verweist, wird diese Referenz zum Vergleich nicht befolgt das andere Objekt.

Wenn Sie Ihre Formularelemente entsprechend ihrem Status (geändert / nicht geändert) dynamisch formatieren oder testen müssen, ob sich einige Werte tatsächlich geändert haben, können Sie das folgende von mir entwickelte Modul verwenden: https://github.com/betsol / Winkeleingabe modifiziert

Es fügt dem Formular und seinen untergeordneten Elementen zusätzliche Eigenschaften und Methoden hinzu. Mit ihm 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 Überwachung einrichten: $scope.$watch('myForm.modified', handler)und Ihr Handler wird aufgerufen, wenn einige Formularelemente tatsächlich neue Daten enthalten oder wenn sie in den Ausgangszustand zurückkehren.

Sie können auch die modifiedEigenschaft einzelner Formularelemente verwenden, um die Datenmenge zu reduzieren, die über einen AJAX-Aufruf an einen Server gesendet wird. Es ist nicht erforderlich, unveränderte Daten zu senden.

Als Bonus können Sie Ihr Formular per Aufruf der Formularmethode in den Ausgangszustand reset()zurückversetzen.

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

Prost!