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

Question

我正在写和AngularJS指令为DagreD3。我在Angular的$ scope更新中遇到了一些问题。当我更新模型时，指令不会重新呈现图形。

A plunker can be found here.

我的指令是这样的：

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.graph是在运行过程中控制器修改如下：

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

我才明白什么不对在Angular中？每当变量$ scope.graph被改变，我想要更新图形。 您可以在Plunker中找到更多信息。

非常感谢您的帮助！

Answer 1

的守望者看起来应该喜欢这样：

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

或者这样：

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

原因它是由基准进行比较，不会然而添加节点时开火。

您可以添加true作为第三个参数进行了深刻的表，而不是（它将使用angular.equals）：

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

注意，这是更昂贵。

例子：

.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 
    }; 
}); 

演示：http://plnkr.co/edit/Dn1t3sMH58mDz9HhqYD5?p=preview

如果你只是改变了节点上，您可以定义watchExpression这样，而不是：

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

深看大对象可以对性能有负面影响。这当然取决于被监视对象和应用程序的大小和复杂程度，但是很好意识到。