是否使用 javascript 闭包(使用 angularjs 指令和 d3js 时)

Question

受到这个例子的启发angular directive with 2-way binding ，我做了一个简单的指令，一旦单击将更改父范围 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";
    }       
  }
}
});

现在我在“link”内添加一个用 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

Answer 1

您需要添加scope.$apply因为您正在“Angular 世界”“外部”更新范围，并且您希望 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 .