Uhr Richtlinie Umfang funktioniert nicht

Question

Kontext

Mein Controller speichert ein Array. Wenn Sie eine bestimmte Verknüpfung auf der Tastatur drücken, füge ich ein neues Objekt zu diesem Array hinzu.

Das Array wird innerhalb einer Direktive verwendet, um ein Diagramm anzuzeigen.

Also, auf eine Tastenkombination gedrückt sollte das Diagramm mit dem neuen Wert aktualisiert werden.

-Controller

vm.observation = [{ 
    "sale": "202", 
    "year": "2010" 
}, { 
    "sale": "215", 
    "year": "2011" 
}, { 
    "sale": "179", 
    "year": "2012" 
}, { 
    "sale": "199", 
    "year": "2013" 
}, { 
    "sale": "134", 
    "year": "2014" 
}, { 
    "sale": "176", 
    "year": "2015" 
}]; 

Richtlinie

angular.module('spwApp.directives') 
    .directive('linechart', [function() { 
     return { 
      restrict: 'E', 
      scope: { 
       id: "@", 
       observation: "=" 
      }, 
      link: function($scope, element, attrs) { 
       $scope.$watch("observation", function(newVal, oldVal){ 
        console.log("OBS : " + newVal); 
       }, true); 
      } 
     } 
    }]) 

HTML

<linechart id="linechart3" observation="vm.observation"></linechart> 

Wenn die Seitenlade th Das Diagramm zeigt die Daten korrekt an und die Konsole wird korrekt eingeloggt $watch wird korrekt ausgeführt.

Wie dem auch sei, nachdem die Verknüpfung Drücken der $watch nicht ausgelöst wird, während das Array aktualisiert wird

Ich kann nicht den Fehler in meinem Code finden

Answer 1

Sie etwas zu dem Array hinzufügen, aber das Array selbst bleibt die gleich. Ein normaler Beobachter reagiert nur auf einen Wert, der sich ändert. Deshalb Angular bietet auch $watchCollection:

$scope.$watchCollection("observation", 

$watchCollection überwacht auch den Inhalt des Arrays, das heißt, es prüft, ob etwas entfernt oder hinzugefügt werden.