Angular.js détecter automatiquement le changement de modèle

Question

Supposons que je voulais faire quelque chose comme automatiquement exécuter du code (comme l'enregistrement de données sur un serveur) à chaque fois qu'un modèle de changement des valeurs. Est la seule façon de le faire en mettant quelque chose comme ng-change sur chaque contrôle qui pourraient éventuellement modifier le modèle?

C'est à dire, avec des points de vue, les choses changent droit que le modèle est modifié sans avoir à connecter explicitement que quoi que ce soit. Est-il un analogue pour être en mesure d'exécuter le code qui enregistre sur un serveur? Quelque chose comme

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

comme vous pouvez le voir avec quelque chose comme de la colonne vertébrale.

Answer 1

Dans les vues de {{}} et/ou ng-model, Angulaire est la création d' $watch()es pour vous dans les coulisses.

Par défaut $watch compare par référence. Si vous définissez le troisième paramètre $watch de true, Angulaire sera plutôt "superficielle" regarder l'objet de modifications. Pour les tableaux ce qui signifie comparer les éléments de tableau, pour l'objet des cartes, cela signifie en regardant les propriétés. Cela devrait donc faire ce que vous voulez:

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

Mise à jour: Angulaire v1.2 ajout d'une nouvelle méthode pour cela, `$watchCollection():

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

Notez que le mot "superficielle" est utilisé pour décrire la comparaison plutôt que de "profond", car les références ne sont pas respectées (par exemple, si l'objet observé contient la valeur d'une propriété qui est une référence à un autre objet, cette référence n'est pas suivie de comparer l'autre objet.

Answer 2

Et si vous avez besoin pour le style de vos éléments de formulaire en fonction de son état (modifié ou non modifié) ou dynamique pour tester si certaines valeurs ont changé, vous pouvez utiliser le module suivant, développé par moi-même: https://github.com/betsol/angular-input-modified

Il ajoute d'autres propriétés et méthodes de la forme, et il est des éléments d'enfant. Avec elle, vous pouvez tester si un élément contient de nouvelles données ou même tester si l'ensemble du formulaire a de nouvelles données non enregistrées.

Vous pouvez configurer les éléments suivants de la montre: $scope.$watch('myForm.modified', handler) et votre gestionnaire sera appelé si certains éléments de formulaire contient de nouvelles données ou si elle est revenue à l'état initial.

Aussi, vous pouvez utiliser modified de la propriété individuelle des éléments de formulaire pour effectivement réduire la quantité de données envoyées à un serveur via un appel AJAX. Il n'est pas nécessaire d'envoyer des données inchangées.

Comme un bonus, vous pouvez revenir à votre formulaire à l'état initial par appel à la forme de l' reset() méthode.

Vous pouvez trouver le module de démo ici: http://plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview

Cheers!