是否关闭javascript（同时使用angularjs指令和d3js）

Question

受此示例具有2向绑定的angular指令的启发，我做了一个简单的指令，一旦单击它将更改父作用域codepen live上的值。

.directive("haha", function() {
return {
  scope: {
    v: '='
  },
  template: `<div ng-click="myfun()">click me now</div>`,
  link: function(scope, element) {
    scope.myfun = function() {
      scope.v  = "clicked";
    }       
  }
}
});

现在，我在“链接”中添加了一个用d3绘制的svg圆，并尝试使用d3.on添加类似的事件处理程序

d3.select(element[0]).append("svg").attr({width:300,height:300})
      .append("circle").attr({cx:100,cy:100,r:20})
      .on("click",function(){scope.v="clicked inside d3"; alert(scope.v)});

当我单击圆圈时，html页面上的{{value}}不变。 Codepen Live

按照javascript封闭规则，在on("click", function() ... ， scope.v仍应与link: function(scope... scope相同link: function(scope...

Answer 1

您需要添加scope。$ apply，因为您要在“ angular world”外部更新范围，并且希望angular运行摘要循环。

d3.select(element[0]).append("svg").attr({width:300,height:300})
      .append("circle").attr({cx:100,cy:100,r:20})
      .on("click",function(){scope.$apply(function(){scope.v="clicked inside d3";})});

Codepen 。