Question

我正在尝试使用angular创建一个svg元素。目前我可以进行ng-repeat但是当我尝试为我的属性赋值时，我收到错误。

<g ng-repeat="cell in row">
    <rect x="{{cell.node.x}}" y="{{cell.node.y}}"></rect>
    <text x="10" y="10">{{cell.node.name}}</text>
</g>

有趣的是cell.node.name确实有效并显示名称nicelly但是cell.node.x和cell.node.y，相应地给我以下错误错误：属性x =“cell.node.x”的值无效错误：属性y =“cell.node.y”的值无效有什么想法吗？

Answer 1

较新版本的Angular功能ngAttr属性绑定，应避免在Angular启动之前浏览器验证时导致的错误。

示例（来自Angular docs）：

<svg>
  <circle ng-attr-cx="{{cx}}"></circle>
</svg>

Answer 2

嗯，它正在工作，here's a plunk，但是你得到了这个错误，因为浏览器在渲染之前验证了SVG，并且在验证时，x和y等于“{{cell .node.x}}“和”{{cell.node.y}}“分别。一旦角度更新了视图，它确实会将矩形放在它们应该是的位置。

我注意到的一件事是，你错过了矩形的width和height属性，会导致它们无法显示。

没有很多好方法可以抑制此错误。我想你可以制作一个自定义指令，直到它们被编译后才会呈现SVG元素。

Answer 3

作为blesh提示：为导致问题的属性制作自定义指令可以阻止Chrome中的错误。 github上有this issue的解决方案。