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){....

该指令被称为＆＃34;＆＃34;白衣这个标签

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

问题是只有在加载页面时才会调用render函数，但是当控制器更新模型时则不会调用...

哪里出错了？整体设置似乎是正确的，你怎么看？

Answer 1

因为$watch正在观看scope.data.nodes的引用，所以无论你推动或弹出什么，引用都不会改变。

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

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

AngularJs $观看问题

1 个答案: