AngularJs $ watch issue

Question

내 응용 프로그램에는 차트를 그릴 때 사용하는 컨트롤러와 지시문이 있습니다. 전 모델에 일부 데이터를 추가하는 기능을 설정 한 컨트롤러 $scope.d3DataGraph ={"selected":{"node":"","impiega":[],"impiegato": []} , "nodes":[],"links":[]};

: 은 나의 모델이 같다

다음

$scope.d3DataGraph.nodes.push(articolo); 

난 그래프를 그릴 담당하는 지침을 DOM을 일부 SVG 태그를 추가하여 내 지시에

내가 모델이 변경 될 때 트리거 할 필요가 렌더링 기능을 가지고 ...

angular.module('myApp.directives') 
.directive('d3Graph', ['d3', function(d3) { 
    return { 
    restrict: 'EA', 
    scope: { 
     data: "=", 
     query: "=", 
     label: "@", 
     onClick: "&" 
    }, 
    link: function(scope, iElement, iAttrs) { 

     var svg = d3.select(iElement[0]).append("svg") 
     .attr("width", "100%") 
     .attr("height", "800px"); 
     var datatree = {}; 

     scope.$watch(function(){ return scope.data.nodes; }, function(){ 
      return scope.render(scope.data, scope.query); 
      } 
     ); 

     scope.render = function(datatreex, query){.... 

지시어 "라고"한다

오순절이 태그

<d3-graph data="d3DataGraph" selected = "selected" query = "selezionati"></d3-graph> 

문제 (가) 페이지가로드 된 경우에만 호출 기능을 렌더링하지만, 컨트롤러가 모델을 업데이트하지 않을 경우 ...이다

내가 잘못 됐어? 전체 설정이 올바른 것 같습니다. 어떻게 생각하니?

Answer 1

의 참조를 보려고했기 때문에 그건 그렇습니다. 푸시 또는 팝에 상관없이 참조는 변경되지 않습니다.

$watch 대신에 $watchCollection을 사용할 수 있습니다. 어레이의 길이를 감지합니다.

scope.$watchCollection('data.nodes', function(){ 
    return scope.render(scope.data, scope.query); 
});