Wie ignoriere ich das anfängliche Laden, wenn ich Modelländerungen in AngularJS beobachte?

Ich habe eine Webseite, die als Editor für eine einzelne Entität dient und als tiefes Diagramm in der Eigenschaft $ scope.fieldcontainer gespeichert ist. Nachdem ich eine Antwort von meiner REST-API erhalten habe (über $ resource), füge ich 'fieldcontainer' eine Überwachung hinzu. Ich benutze diese Uhr, um festzustellen, ob die Seite / Entität "schmutzig" ist. Im Moment lasse ich die Schaltfläche "Speichern" springen, aber ich möchte die Schaltfläche "Speichern" wirklich unsichtbar machen, bis der Benutzer das Modell verschmutzt.

Was ich bekomme, ist ein einzelner Auslöser der Uhr, der meiner Meinung nach geschieht, weil die Zuweisung von .fieldcontainer = ... unmittelbar nach dem Erstellen meiner Uhr erfolgt. Ich habe darüber nachgedacht, nur eine "dirtyCount" -Eigenschaft zu verwenden, um den anfänglichen Fehlalarm zu absorbieren, aber das fühlt sich sehr hackig an ... und ich dachte, es muss eine "Angular Idiomatic" -Methode geben, um damit umzugehen - ich bin nicht der einzige Verwenden einer Uhr, um ein schmutziges Modell zu erkennen.

Hier ist der Code, mit dem ich meine Uhr eingestellt habe:

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

Ich denke immer nur, dass es einen saubereren Weg geben muss, als meinen "UI Dirtyying" -Code mit einem "if (dirtyCount> 0)" zu schützen ...

Setzen Sie kurz vor dem ersten Laden ein Flag.

var initializing = true

und dann, wenn die erste $ watch feuert, tun Sie es

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

Das Flag wird erst am Ende des aktuellen Digest-Zyklus abgerissen, sodass die nächste Änderung nicht blockiert wird.

Beim ersten Aufruf des Listeners sind der alte und der neue Wert identisch. Also mach einfach das:

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

Dies ist eigentlich die Art und Weise, wie die Angular-Dokumente empfehlen, damit umzugehen :

Nachdem ein Beobachter im Bereich registriert wurde, wird der Listener fn asynchron (über $ evalAsync) aufgerufen, um den Beobachter zu initialisieren. In seltenen Fällen ist dies unerwünscht, da der Listener aufgerufen wird, wenn sich das Ergebnis von watchExpression nicht geändert hat. Um dieses Szenario im Listener fn zu erkennen, können Sie newVal und oldVal vergleichen. Wenn diese beiden Werte identisch sind (===), wurde der Listener aufgrund der Initialisierung aufgerufen

Mir ist klar, dass diese Frage beantwortet wurde, aber ich habe einen Vorschlag:

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

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

Die Verwendung von Flags funktioniert, hat aber einen gewissen Code-Geruch , finden Sie nicht?

Beim erstmaligen Laden der aktuellen Werte ist das alte Wertefeld undefiniert. Das folgende Beispiel hilft Ihnen also, anfängliche Ladungen auszuschließen.

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

Validieren Sie einfach den Status des neuen Werts:

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