Comment puis-je ignorer le chargement initial lors de l'observation des changements de modèle dans AngularJS?

J'ai une page web qui sert de l'éditeur pour une seule entité, qui se trouve comme un graphe dans le $scope.fieldcontainer de la propriété. Après je reçois une réponse de mon API REST (via $ressource), j'ajoute une montre pour 'fieldcontainer'. J'utilise cette montre pour détecter si la page/l'entité est "sale". Droit maintenant, je suis en train de faire le bouton enregistrer de rebond, mais je veux réellement faire le bouton enregistrer invisible jusqu'à ce que l'utilisateur souillures du modèle.

Ce que je reçois est d'un seul déclencheur de la montre, je pense que c'est dû au fait que l' .fieldcontainer = ... cession a lieu immédiatement après que j'ai créer ma montre. Je pensais simplement à l'aide d'un "dirtyCount" propriété d'absorber la première fausse alarme, mais qui se sent très hacky ... et j'ai pensé, il y a un "Angulaire idiomatiques" façon de traiter avec cela - je ne suis pas le seul à l'aide d'une montre pour détecter un sale modèle.

Voici le code où j'ai mis ma montre:

 $scope.fieldcontainer = Message.get({id: $scope.entityId },
            function(message,headers) {
                $scope.$watch('fieldcontainer',
                    function() {
                        console.log("model is dirty.");
                        if ($scope.visibility.saveButton) {
                            $('#saveMessageButtonRow').effect("bounce", { times:5, direction: 'right' }, 300);
                        }
                    }, true);
            });

Je viens de continuer à penser qu'il y a obtenu d'être d'une façon plus propre de faire cela que garde de mon "UI salir" code "si (dirtyCount >0)"...

J'ai aussi besoin d'être en mesure de recharger $champ d'application.fieldcontainer basé sur certains boutons (par exemple, le chargement d'une version précédente de l'entité). Pour cela, j'aurais besoin de suspendre la montre, recharger, puis reprendre la montre.
Envisagez-vous de changer ma réponse à la accepté de répondre? Ceux qui prennent le temps de lire tout le chemin jusqu'à il plutôt d'accord que c'est la bonne solution.
J'ai le même OP problème, mais dans mon cas, votre réponse ne fonctionne pas, parce que mon ancienne valeur n'est pas undefined. Il a une valeur par défaut qui est nécessaire dans le cas de mon modèle de mise à jour n'est pas venu avec toutes les informations. Si certaines valeurs dosn pas changer, mais ont pour déclencher.
Donc, au lieu de vérifier les contre indéfini, prendre la "typeof" et de vérifier l'old_fieldcontainer à l'encontre de vos valeurs par défaut.
vous devez marquer MW réponse à la réponse correcte pour d'autres personnes à trouver cette question. C'est une bien meilleure solution. Merci!

OriginalL'auteur Kevin Hoffman | 2013-06-05

angularjs angularjs-scope

111

définir un indicateur juste avant le chargement initial,
```
var initializing = true
```
et puis, quand la première tranche de regarder les feux, ne
```
$scope.$watch('fieldcontainer', function() {
  if (initializing) {
    $timeout(function() { initializing = false; });
  } else {
    //do whatever you were going to do
  }
});
```
Le drapeau sera déchirer vers le bas juste à la fin de l'actuel digérer cycle, donc la prochaine modification ne sera pas bloqué.

Oui, ça fonctionne, mais la comparaison entre l'ancienne et la nouvelle valeur de l'approche proposée par @MW. est à la fois plus simple et plus Anguleux idiomatiques. Pouvez-vous mettre à jour la accepté de répondre?
Toujours la oldValue à l'égalité de la newValue sur le premier incendie a été ajoutée spécialement pour éviter d'avoir à faire ce drapeau hack
MW réponse est incorrecte comme la nouvelle valeur à l'ancienne valeur de ne pas gérer le cas où l'ancienne valeur est undefined.
Pour les commentateurs: ce n'est pas un dieu de modèle, rien ne vous empêche de mettre le "initialisé" variable à l'intérieur de la portée d'un décorateur, et de le décorer votre "normal" regarder avec elle. En tout cas, c'est complètement en dehors de la portée de cette question.
Voir plnkr.co/modifier/VrWrHHWwukqnxaEM3J5i pour la comparaison de la propoosed méthodes, en précisant les observateurs de la dans le .get() de rappel, et sur le champ d'application de l'initialisation.

OriginalL'auteur rewritten
469

La première fois, l'auditeur est appelé, l'ancienne valeur et la nouvelle valeur sera identique. Alors fais ceci:
```
$scope.$watch('fieldcontainer', function(newValue, oldValue) {
  if (newValue !== oldValue) {
    //do whatever you were going to do
  }
});
```
C'est en fait la façon dont l'angle de docs recommandons de le manipuler:

Après un observateur est enregistré auprès de la portée, de l'auditeur fn est appelée de façon asynchrone (via $evalAsync) pour initialiser l'observateur. Dans de rares cas, ce n'est pas souhaitable parce que l'auditeur est appelé lorsque le résultat de watchExpression n'a pas changé. Pour détecter ce scénario au sein de l'auditeur fn, vous pouvez comparer les newVal et oldVal. Si ces deux valeurs sont identiques (===) ensuite, l'auditeur a été appelé en raison de l'initialisation

cette méthode est plus idiomatique que @réécrit la réponse de
ce doit être la accepté de répondre - c'est la façon angulaire
Ce n'est pas correct. Le point est ignorer le changement de null à l'initiale chargé de la valeur, de ne pas ignorer le changement quand il n'y a pas de changement.
Ainsi, la fonction d'écoute sera toujours de se déclencher lorsque la montre est créé. C'est ignorer que le premier appel, qui est ce que je crois le sens voulu. Si il a spécifiquement veut ignorer le changement lorsque l'ancienne valeur est nulle, il peut évidemment comparer oldValue à null... mais je ne pense pas que c'est ce qu'il voulait faire.
C'est faux, oldValue sera nulle sur le premier tour.

OriginalL'auteur MW.
41

Je me rends compte que cette question a été répondu, cependant j'ai une suggestion:
```
$scope.$watch('fieldcontainer', function (new_fieldcontainer, old_fieldcontainer) {
    if (typeof old_fieldcontainer === 'undefined') return;

    //Other code for handling changed object here.
});
```
À l'aide de drapeaux fonctionne mais avec un peu de odeur de code à elle, vous ne pensez pas?

C'est le chemin à parcourir. En Coffeescript, c'est aussi simple que return unless oldValue? (? est l'opérateur existentiel dans CS).
Des accessoires sur le mot de code odeur ! consultez également dieu de l'objet lol. trop bon.
Bien que ce n'est pas la accepté de répondre, ce qui fait que mon code de travail lors du remplissage d'un objet à partir d'une API et je veux regarder les différents états de sauvegarde. Très agréable.
Merci - cela a contribué pour moi
C'est grand, cependant, dans mon cas, j'ai eu instancié les données comme un tableau vide avant de faire l'appel AJAX à mon API, afin de vérifier la longueur de la place du type. Mais cette réponse montre certainement la méthode la plus efficace au moins.

OriginalL'auteur trixtur

Valide l'état de la nouvelle-val:

$scope.$watch('fieldcontainer',function(newVal) {
      if(angular.isDefined(newVal)){
          //Do something
      }
});

OriginalL'auteur Luis Saraza

1

Cours de chargement initial de valeurs actuelles ancien champ de valeur est undefined. Ainsi l'exemple ci-dessous vous aide pour l'exclusion des charges initial.
```
$scope.$watch('fieldcontainer', 
  function(newValue, oldValue) {
    if (newValue && oldValue && newValue != oldValue) {
      //here what to do
    }
  }), true;
```
Vous voudrez probablement utiliser !== depuis null et undefined correspondra dans cette situation, ou ('1' == 1 etc)
en général, vous avez raison. Mais dans ce cas, newValue et oldValue peut-être pas le coin des valeurs en raison des vérifications précédentes. La fois de la valeur est du même type aussi parce appartient au même champ. Je vous remercie.

OriginalL'auteur Tahsin Turkoz

Vous devez vous connecter pour publier un commentaire.