Comment ignorer la charge initiale lorsque je regarde les changements de modèle dans AngularJS?

J'ai une page Web qui sert d'éditeur pour une seule entité, qui se présente comme un graphe profond dans la propriété $ scope.fieldcontainer. Après avoir reçu une réponse de mon API REST (via $ resource), j'ajoute une montre à 'fieldcontainer'. J'utilise cette montre pour détecter si la page / entité est "sale". En ce moment, je fais rebondir le bouton de sauvegarde, mais je veux vraiment rendre le bouton de sauvegarde invisible jusqu'à ce que l'utilisateur salisse le modèle.

Ce que je reçois, c'est un seul déclencheur de la montre, ce qui, je pense, se produit parce que l'affectation .fieldcontainer = ... a lieu immédiatement après la création de ma montre. Je pensais simplement utiliser une propriété "dirtyCount" pour absorber la fausse alarme initiale, mais cela semble très piraté ... et j'ai pensé qu'il devait y avoir un moyen "angular idiomatic" de gérer cela - je ne suis pas le seul à l'aide d'une montre pour détecter un modèle sale.

Voici le code où je règle 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 n'arrête pas de penser qu'il doit y avoir un moyen plus propre de le faire que de protéger mon code "UI salissant" avec un "if (dirtyCount> 0)" ...

définir un drapeau juste avant le chargement initial,

var initializing = true

puis quand la première $ watch se déclenche, faites

$scope.$watch('fieldcontainer', function() {
  if (initializing) {
    $timeout(function() { initializing = false; });
  } else {
    // do whatever you were going to do
  }
});

L'indicateur sera supprimé juste à la fin du cycle de résumé en cours, donc le prochain changement ne sera pas bloqué.

La première fois que l'écouteur est appelé, l'ancienne valeur et la nouvelle valeur seront identiques. Alors fais juste 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 les documents Angular recommandent de le gérer :

Une fois qu'un observateur est enregistré avec la portée, l'écouteur fn est appelé de manière asynchrone (via $ evalAsync) pour initialiser l'observateur. Dans de rares cas, cela n'est pas souhaitable car l'écouteur est appelé lorsque le résultat de watchExpression n'a pas changé. Pour détecter ce scénario dans l'écouteur fn, vous pouvez comparer newVal et oldVal. Si ces deux valeurs sont identiques (===) alors l'écouteur a été appelé en raison de l'initialisation

Je me rends compte que cette question a été répondue, mais 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'utilisation de drapeaux fonctionne mais a une petite odeur de code, vous ne pensez pas?

Lors du chargement initial des valeurs actuelles, l'ancien champ de valeur n'est pas défini. L'exemple ci-dessous vous aide donc à exclure les chargements initiaux.

$scope.$watch('fieldcontainer', 
  function(newValue, oldValue) {
    if (newValue && oldValue && newValue != oldValue) {
      // here what to do
    }
  }), true;

Validez simplement l'état du nouveau val:

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