AngularJS: automatycznie wykrywa zmianę w modelu

Question

Załóżmy, że chciałbym zrobić coś takiego, jak automatycznie uruchamiać kod (na przykład zapisywanie danych na serwerze) za każdym razem, gdy zmieniają się wartości modelu. Czy jest to jedyny sposób, ustawiając coś w rodzaju kontrolki, która może zmienić model?

Tj., Z widokami, rzeczy zmieniają się w prawo, gdy model jest zmieniany bez konieczności wyraźnego podpinania czegokolwiek. Czy istnieje odpowiednik na uruchamianie kodu, który zapisuje na serwerze? Coś podobnego do tego, co widzisz z kręgosłupem.

Answer 1

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

Domyślnie $watch porównuje się przez odniesienie. Jeśli ustawisz trzeci parametr na $watch na true, Angular zamiast tego "spłyci" będzie obserwował obiekt w celu zmiany. W przypadku tablic oznacza to porównywanie elementów tablicy, w przypadku map obiektowych oznacza to oglądanie właściwości. Tak to powinno robić, co chcesz:

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

Aktualizacja: kątowe v1.2 dodaje nową metodę do tego, `$watchCollection():

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

zauważyć, że słowo "płytkie" jest używany do opisania Porównanie raczej niż "głębokie", ponieważ odniesienia nie są przestrzegane - np. jeśli obserwowany obiekt zawiera wartość właściwości, która jest odniesieniem do innego obiektu, to odniesienie nie jest stosowane w celu porównania innego obiektu.

Answer 2

A jeśli trzeba projektować swoje elementy formularza według swojego stanu (zmodyfikowany/niemodyfikowane) dynamicznie lub sprawdzić, czy pewne wartości rzeczywiście zmieniły, można użyć następujących modułów, opracowaną przez siebie: https://github.com/betsol/angular-input-modified

Dodaje dodatkowe właściwości i metody do formularza i jego elementów potomnych. Za jego pomocą można sprawdzić, czy jakiś element zawiera nowe dane, czy nawet sprawdzić, czy cały formularz zawiera nowe niezapisane dane.

Możesz ustawić następujący zegarek: $scope.$watch('myForm.modified', handler) i twój przewodnik zostanie wywołany, jeśli niektóre elementy formularza rzeczywiście zawierają nowe dane lub jeśli zostały odwrócone do stanu początkowego.

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

Jako bonus można przywrócić formularz do stanu początkowego, wywołując metodę formularza reset().

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

Cheers!