AngularJs $ watch issue

Question

В моем приложении у меня есть контроллер и директива, которую я использую для рисования диаграммы. так что моя модель выглядит так: $scope.d3DataGraph ={"selected":{"node":"","impiega":[],"impiegato": []} , "nodes":[],"links":[]};

в контроллере я создал функцию, которая добавляет некоторые данные модели:

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

тогда я имею директиву, которая отвечает нарисовать график добавив некоторые теги 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 просто следит за ссылкой scope.data.nodes, поэтому независимо от того, что вы нажимаете или поп, ссылка не изменится.

Вместо использования $watch вы можете использовать $watchCollection. Он будет определять длину массива.

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