AngularJS: rileva automaticamente il cambiamento nel modello

Supponiamo di voler fare qualcosa come eseguire automaticamente del codice (come salvare i dati su un server) ogni volta che i valori di un modello cambiano. L'unico modo per farlo è impostare qualcosa di simile ng-changesu ogni controllo che potrebbe alterare il modello?

Cioè, con le visualizzazioni, le cose cambiano proprio quando il modello viene modificato senza dover collegare esplicitamente nulla. Esiste un analogo alla possibilità di eseguire codice che salva su un server? Qualcosa di simile a

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

come potresti vedere con qualcosa come spina dorsale.

Nelle visualizzazioni con {{}}e / o ng-model, Angular ti sta allestendo $watch()dietro le quinte.

Per impostazione predefinita, $watchconfronta per riferimento. Se imposti il ​​terzo parametro su $watcha true, Angular guarderà invece "superficiale" l'oggetto per i cambiamenti. Per gli array questo significa confrontare gli elementi dell'array, per le mappe di oggetti significa osservare le proprietà. Quindi questo dovrebbe fare quello che vuoi:

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

Aggiornamento : Angular v1.2 ha aggiunto un nuovo metodo per questo, `$ watchCollection () :

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

Nota che la parola "superficiale" è usata per descrivere il confronto piuttosto che "profondo" perché i riferimenti non vengono seguiti - ad esempio, se l'oggetto osservato contiene un valore di proprietà che è un riferimento a un altro oggetto, quel riferimento non viene seguito per il confronto l'altro oggetto.

E se hai bisogno di modellare i tuoi elementi del modulo in base al suo stato (modificato / non modificato) dinamicamente o per verificare se alcuni valori sono effettivamente cambiati, puoi utilizzare il seguente modulo, sviluppato da me: https://github.com/betsol / angolare input-modificato

Aggiunge proprietà e metodi aggiuntivi al form e ai suoi elementi figlio. Con esso, puoi verificare se qualche elemento contiene nuovi dati o anche verificare se l'intero modulo ha nuovi dati non salvati.

Puoi impostare il seguente watch: $scope.$watch('myForm.modified', handler)e il tuo gestore verrà chiamato se alcuni elementi del modulo contengono effettivamente nuovi dati o se è tornato allo stato iniziale.

Inoltre, è possibile utilizzare la modifiedproprietà dei singoli elementi del modulo per ridurre effettivamente la quantità di dati inviati a un server tramite una chiamata AJAX. Non è necessario inviare dati invariati.

Come bonus, puoi ripristinare il tuo modulo allo stato iniziale tramite la chiamata al reset()metodo del modulo .

Puoi trovare la demo del modulo qui: http://plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview

Saluti!