AngularJs $watch问题

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只是在看scope.data.nodes的引用，所以不管您推动或流行什么，引用都不会改变。

不用使用$watch，您可以使用$watchCollection。它将检测数组的长度。

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