集成AngularJS和DagreD3-AngularJS指令不会在模型更改时更新。

我正在为你写一封信。我对Angular中的$scope更新有一些问题。更新模型时，指令不会重新渲染图形

我的指令如下所示：

myApp.directive('acDagre', function() {

function link(scope, element, attrs) {

  scope.$watch(scope.graph, function(value) {
    alert('update'); //NOT EVEN THIS IS CALLED ON UPDATE
  });

  var renderer = new dagreD3.Renderer();
  renderer.run(scope.graph, d3.select("svg g"));
}
return {
  restrict: "A",
  link: link
};

$scope.addNode = function(){
 $scope.graph.addNode("kbacon2", { label: "Kevin Bacon the second" });
}

在运行时，在控制器中修改变量$scope.graph，如下所示：

myApp.directive('acDagre', function() {

function link(scope, element, attrs) {

  scope.$watch(scope.graph, function(value) {
    alert('update'); //NOT EVEN THIS IS CALLED ON UPDATE
  });

  var renderer = new dagreD3.Renderer();
  renderer.run(scope.graph, d3.select("svg g"));
}
return {
  restrict: "A",
  link: link
};

$scope.addNode = function(){
 $scope.graph.addNode("kbacon2", { label: "Kevin Bacon the second" });
}

我是不是理解错了？每次更改变量$scope.graph时，我都希望该图更新。 您可以在Plunker中找到更多信息

---

非常感谢你的帮助

观察者应如下所示：

scope.$watch('graph', function(value) {
  console.log('update');
});

scope.$watch(function () { return scope.graph; }, function(value) {
  console.log('update');
});

或者像这样：

scope.$watch('graph', function(value) {
  console.log('update');
});

scope.$watch(function () { return scope.graph; }, function(value) {
  console.log('update');
});

但是，在添加节点时它不会激发，因为它是通过引用进行比较的

您可以添加

true

作为第三个参数来执行深度监视（它将使用

angular.equals

）：

请注意，这是更昂贵的

例如：

.directive('acDagre', function() {

  var renderer = new dagreD3.Renderer();

  function link(scope, element, attrs) {

    scope.$watch(function () { return scope.graph; }, function(value) {
      render();
    }, true);

    var render = function() {
      renderer.run(scope.graph, d3.select("svg g"));
    };
  }

  return {
    restrict: "A",
    link: link
  };
});

演示：

如果您只是更改节点，则可以这样定义

watchExpression

：

scope.$watch(function () { return scope.graph._nodes; }

深入观察大型对象可能会对性能产生负面影响。这当然取决于被观察对象和应用程序的大小和复杂度，但最好注意到这一点