Javascript 操作SVG元素[使用JSFIDLE]时丢失事件绑定

我已经创建了一个自定义指令，用于将

和

等标记呈现到

元素中

我有一个形状模型，它只是一组具有各种属性的对象，例如

宽度

、

高度

和

笔划宽度

这些形状通过我的自定义指令渲染到SVG中

<svg height="400" width="600">
  <dr-shape ng-repeat="shape in shapes"></dr-shape>
</svg>

指令定义如下所示（大量注释）：

app.directive（'drShape'，['$compile'，function（$compile）{
//用于向元素添加属性的辅助函数。
var bindNgAttr=函数（el、属性、值）{
el.attr（'ng-attr-'+属性，{{shape.'+属性+'}}'）；
};
返回{
限制：'E'，
链接：函数（范围、元素、属性）{
//#makeNode只是使用`document.createElements'创建一个DOM节点`
//这样就可以将它附加到SVG元素中
//指令上的任何属性。
var shape=makeNode（scope.shape.tagName、元素、属性）；
var elementShape=角度元素（形状）；
//此部分迭代形状的属性并附加它们
//我正在这样做（而不是声明它们）
//其中该指令在模板中使用，因为节点
//对节点使用不同的属性。因此我不能硬编码它们。
for（scope.shape中的var属性）{
//#isPublic只是确保我们不分配任何“$”属性。
if（isPublic（属性，scope.shape[属性]）{
//这里我们使用上面定义的帮助器。
bindNgAttr（元素形状、属性）；
}
}
//在这里，我向元素添加了一个click侦听器
//当我单击a时，我可以看到控制台日志。填充颜色
//然而，在浏览器中似乎从未改变。我只能假设
//模型数据正在更改，但与DOM的绑定已更改
//坏了。
elementShape.on（'单击'，函数（））{
log（'Clicked in directive'）；
scope.shape.fill='#bada55'；
});
元素。替换为（形状）；
//不确定这是干什么的。它来自：http://goo.gl/ZoYpQv
属性$observe（'value'，函数（value）{
scope['value']=parseInt（值，10）；
$compile（shape）（范围）；
});
}
};
}]);

当我使用一些形状数据运行此操作时，我会在浏览器中获得以下SVG：

<svg height="400" width="600">
  <!-- ngRepeat: shape in shapes -->
  <rect ngRepeat="shape in shapes" strokeWidth="3" ng-attr-stroke="{{shape.stroke}}" ng-attr-fill="{{shape.fill}}" ng-attr-x="{{shape.x}}" ng-attr-y="{{shape.y}}" ng-attr-width="{{shape.width}}" ng-attr-height="{{shape.height}}" ng-attr-tagname="{{shape.tagName}}" stroke="#aea086" fill="#fff" x="239" y="89" width="25" height="22" tagname="rect"></rect>
  <!-- end ngRepeat: shape in shapes -->
  <rect ngRepeat="shape in shapes" strokeWidth="3" ng-attr-stroke="{{shape.stroke}}" ng-attr-fill="{{shape.fill}}" ng-attr-x="{{shape.x}}" ng-attr-y="{{shape.y}}" ng-attr-width="{{shape.width}}" ng-attr-height="{{shape.height}}" ng-attr-tagname="{{shape.tagName}}" stroke="#a265e7" fill="#fff" x="233" y="6" width="12" height="43" tagname="rect"></rect>
  <!-- end ngRepeat: shape in shapes -->
</svg>

正如我在上面代码块的注释中所解释的，在任何形状模型中操作数据都不会更新相应的SVG DOM节点

我已尝试在单击处理程序中调用

scope.$apply（）

和

scope.$digest（）

，但它没有改变任何内容。（编辑：这不正确-请参阅下面我的答案）

---

如何使数据更改在视图中生效？

事实证明，调用

作用域.$apply（）

实际上在单击处理程序中起作用。我不确定我在做什么，这让我认为它不起作用

  elementShape.on('click', function() {
    console.log('Clicked in directive');
    scope.shape.fill = '#bada55';
    scope.$apply();
  });

我在JSFIDLE中也犯了一个错误，使问题更加复杂

很抱歉，我浪费了任何人的时间！

范围。$apply（）

在单击处理程序中是必需的。您可以制作一个小提琴来重现问题吗？完成。

  elementShape.on('click', function() {
    console.log('Clicked in directive');
    scope.shape.fill = '#bada55';
    scope.$apply();
  });