JavaScript闭包与否(使用AngularJS指令和D3JS时）

javascript closure or not (while using angularjs directive and d3js)

本文关键字：指令 D3JS AngularJS 使用 闭包 JavaScript      更新时间：2023-09-26

受到这个带有 2 路绑定的 angular 指令示例的启发，我做了一个简单的指令，一旦点击就会实时更改父范围代码笔上的值。 

.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}}不会改变。 代码笔直播

难道不正确吗，作为 javascript 闭包规则，在 on("click", function() ... 中，scope.v应该仍然与scope相同link: function(scope...

你需要添加 scope.$apply，因为你正在"角度世界"之外更新你的范围，并且您希望 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";})});

代码笔。

相关文章：