AngularJS: automatycznie wykrywa zmianę w modelu

Załóżmy, że chciałem zrobić coś takiego, jak automatyczne uruchamianie kodu (np. Zapisywanie danych na serwerze) za każdym razem, gdy zmienią się wartości modelu. Czy jest to jedyny sposób, aby to zrobić, ustawiając coś podobnego ng-changena każdej kontrolce, która mogłaby zmienić model?

Oznacza to, że w przypadku widoków rzeczy zmieniają się tak, jak zmienia się model, bez konieczności jawnego podłączania czegokolwiek. Czy istnieje analogia do możliwości uruchamiania kodu, który zapisuje na serwerze? Coś jak

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

jak możesz zobaczyć z czymś w rodzaju kręgosłupa.

W widokach z {{}}i / lub ng-model, Angular konfiguruje $watch()dla Ciebie za kulisami.

Domyślnie $watchporównuje przez odniesienie. Jeśli trzeci parametr ustawiony $watchna truekątowa będzie zamiast „płytkie” oglądanie obiektu dla zmian. W przypadku tablic oznacza to porównywanie elementów tablicy, w przypadku map obiektów oznacza to obserwowanie właściwości. Więc powinno to zrobić, co chcesz:

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

Aktualizacja : Angular v1.2 dodał do tego nową metodę, `$ watchCollection () :

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

Zwróć uwagę, że do opisu porównania używa się słowa „płytkie”, a nie „głębokie”, ponieważ nie stosuje się odniesień - np. Jeśli obserwowany obiekt zawiera wartość właściwości, która jest odniesieniem do innego obiektu, odniesienie to nie jest stosowane w celu porównania inny obiekt.

A jeśli chcesz stylizować elementy formularza zgodnie z ich stanem (zmodyfikowany / niezmodyfikowany) dynamicznie lub przetestować, czy niektóre wartości faktycznie się zmieniły, możesz użyć następującego modułu, opracowanego przeze mnie: https://github.com/betsol / kątowe wejście-zmodyfikowane

Dodaje dodatkowe właściwości i metody do formularza i jego elementów potomnych. Dzięki niemu możesz sprawdzić, czy jakiś element zawiera nowe dane, a nawet sprawdzić, czy cały formularz ma nowe niezapisane dane.

Możesz ustawić następujący watch: $scope.$watch('myForm.modified', handler)i twój program obsługi zostanie wywołany, jeśli jakieś elementy formularza faktycznie zawierają nowe dane lub jeśli został przywrócony do stanu początkowego.

Możesz również użyć modifiedwłaściwości poszczególnych elementów formularza, aby faktycznie zmniejszyć ilość danych wysyłanych do serwera za pośrednictwem wywołania AJAX. Nie ma potrzeby przesyłania niezmienionych danych.

Jako bonus możesz przywrócić swój formularz do stanu początkowego poprzez wywołanie reset()metody formularza .

Demo modułu można znaleźć tutaj: http://plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview

Twoje zdrowie!