D3与Angular集成:"错误:<rect>属性x的值无效"

Question

我正在尝试使用AngularJS绑定SVG属性.我有一个形状的调整大小句柄的以下代码:

// S handle.
var s_handle = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "rect"))
    .attr("id", "s-resize")
    .attr("x", "{{(objects['" + id + "'].w - (scope.dragHandle.width / 2))}}")
    .attr("y", "{{(objects['" + id + "'].h - (scope.dragHandle.width / 2))}}")
    .attr(scope.dragHandle)
    .attr("cursor", "s-resize")
    .call(sresize);              

$compile(s_handle.node())(scope);
element.append(s_handle);

当我运行此代码时,我收到以下错误:

Error: Invalid value for <rect> attribute x="{{(objects['9b320170-6365-4f40-801d-a7a5c6b936f9'].w - (scope.dragHandle.width / 2))}}" d3.min.js:1
Error: Invalid value for <rect> attribute y="{{(objects['9b320170-6365-4f40-801d-a7a5c6b936f9'].h - (scope.dragHandle.width / 2))}}" d3.min.js:1

我尝试删除追加步骤以隔离问题 - 看起来问题实际上发生在我设置x和y属性时,甚至在Angular编译阶段之前.

请注意,我使用此方法使用该transform属性处理另一个SVG对象,该属性本身接受字符串.

有没有人遇到过这个问题？有什么解决方案吗？谢谢.

编辑:已经单步执行,看起来$ compile`实际上并没有改变元素.这可能是因为元素无效吗？

Answer 1

看起来这与此问题有关:https://github.com/angular/angular.js/pull/2061

它也在那个问题上得到了解决.

SVG元素使用基于XML的模式,并且是命名空间的,因此具有验证规则.某些属性不能采用Angular插值指令,因为它们需要一个数值,并且浏览器在Angular有机会捕获它之前验证它(即使元素已创建且尚未附加到DOM).

如果有人遇到这个问题,希望这个答案会有所帮助.