3

我正在尝试使用 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

我尝试删除附加步骤以隔离问题 - 看起来问题实际上发生在我设置xandy属性时，甚至在 Angular 编译阶段之前。

请注意，我有此方法使用该属性与另一个 SVG 对象一起使用，该transform属性本机接受一个字符串。

有没有人遇到过这个问题？有什么解决办法吗？谢谢你。

编辑：一直在逐步进行，看起来 $compile` 实际上并没有改变元素。这可能是因为元素无效吗？

4

1 回答 1

8

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

在那个问题上也解决了。

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

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

于 2013-07-04T14:20:17.527 回答