如何通知 Angular 指令范围值已更改？

Question

我正在尝试创建一个 angular 指令来绘制 d3 条形图。我无法确定在何处添加 D3 绘图代码，以便每次图表值更改时重新绘制图表（值与隔离范围相关联）。我试图将这段代码放在 link 函数中，但它只渲染了一次图表。每次范围更改时都不会调用它。请参阅下面的代码或完整的 jsFiddle here.

function barchart() {    
    var directive = {
        link: link,
        restrict: 'A',
        scope: {
            values: '='
        }
    };
    return directive;

    function link(scope, element) {
        // Draw D3 chart here
        element.html(scope.values);
    };
}

Answer 1

您可以 $watch 更改：

function link(scope, element){
   scope.$watch("values", function(newVal, oldVal){
      // do whatever you need to regenerate the graph
   });
}

如何通知 Angular 指令范围值已更改？

How to inform Angular directive that the scope values have changed?

d3.js

angularjs

angularjs-directive

isolate-scope