Come posso ignorare il carico iniziale quando osservo i cambiamenti del modello in AngularJS?

Ho una pagina web che funge da editor per una singola entità, che funge da grafico profondo nella proprietà $ scope.fieldcontainer. Dopo aver ricevuto una risposta dalla mia API REST (tramite $ risorse), aggiungo un orologio a "fieldcontainer". Sto usando questo orologio per rilevare se la pagina / entità è "sporca". In questo momento sto facendo rimbalzare il pulsante di salvataggio, ma in realtà voglio rendere il pulsante di salvataggio invisibile fino a quando l'utente non sporca il modello.

Quello che sto ricevendo è un singolo trigger dell'orologio, che penso stia accadendo perché l'assegnazione .fieldcontainer = ... ha luogo immediatamente dopo la creazione dell'orologio. Stavo pensando di usare solo una proprietà "dirtyCount" per assorbire il falso allarme iniziale, ma mi sembra molto confuso ... e ho pensato che ci doveva essere un modo "angolare idiomatico" per affrontare questo - non sono l'unico utilizzando un orologio per rilevare un modello sporco.

Ecco il codice in cui ho impostato l'orologio:

 $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);
            });

Continuo a pensare che ci debba essere un modo più pulito per farlo che proteggere il mio codice "UI dirtying" con un "if (dirtyCount> 0)" ...

imposta un flag appena prima del caricamento iniziale,

var initializing = true

e poi quando il primo $ watch spara, fallo

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

La bandiera verrà abbattuta proprio alla fine dell'attuale ciclo di digest, quindi la prossima modifica non verrà bloccata.

La prima volta che viene chiamato l'ascoltatore, il vecchio valore e il nuovo valore saranno identici. Quindi fai solo questo:

$scope.$watch('fieldcontainer', function(newValue, oldValue) {
  if (newValue !== oldValue) {
    // do whatever you were going to do
  }
});

Questo è in realtà il modo in cui i documenti angolari consigliano di gestirlo :

Dopo che un watcher è stato registrato con l'ambito, il listener fn viene chiamato in modo asincrono (tramite $ evalAsync) per inizializzare il watcher. In rari casi, questo è indesiderabile perché l'ascoltatore viene chiamato quando il risultato di watchExpression non è cambiato. Per rilevare questo scenario nel listener fn, puoi confrontare newVal e oldVal. Se questi due valori sono identici (===), il listener è stato chiamato a causa dell'inizializzazione

Mi rendo conto che a questa domanda è stata data una risposta, tuttavia ho un suggerimento:

$scope.$watch('fieldcontainer', function (new_fieldcontainer, old_fieldcontainer) {
    if (typeof old_fieldcontainer === 'undefined') return;

    // Other code for handling changed object here.
});

L'uso delle bandiere funziona ma ha un po 'di odore di codice , non credi?

Durante il caricamento iniziale dei valori correnti, il vecchio campo valore non è definito. Quindi l'esempio seguente ti aiuta ad escludere i caricamenti iniziali.

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

Valido solo lo stato del nuovo val:

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