带 svg 的角度重复答案

【问题标题】：angular repeat with svg带 svg 的角度重复
【发布时间】：2015-10-19 15:28:15
【问题描述】：

我需要在 Angular 重复中进行 svg，它看起来可以，但它带有错误

Error: Invalid value for <path> attribute d="{{getShape(data)}}"

而且它的重复次数超出了预期。这是我的简单原型代码。任何想法？ http://plnkr.co/edit/EfINcm1Ee53MA9NptsFA?p=preview

【问题讨论】：

Angular 1.1.1 是 2012 年的一个非常旧的版本。我怀疑您是否在当前的开发项目中使用它，但是您的小提琴中的 javascript 的编写方式，它不会工作较新的版本。我首先要确保您的代码首先适用于现代 Angular 版本。此外，所有 1.1.x 版本都被认为是不稳定的。
我的真实项目使用了足够高版本的angular，但错误看起来一样。
底线，即使您的项目使用较新版本的 Angular，您也向我们展示了较旧版本来说明您的问题，并代表您对较旧版本进行故障排除更新的、受支持的版本是不合理的。
这行不通，因为<svg> 是在调用getShape() 之前被渲染的。我不相信有一个内置指令可以解决这个问题，ng-href 会为href 属性解决这个问题；在这种情况下，我相信您将不得不编写自己的指令来延迟 <svg> 元素的呈现。
这也可能是一本好书，因为它似乎与您在这里所做的事情有关alexandros.resin.io/angular-d3-svg

【解决方案1】：

这是因为 d 属性在 Angular 有机会评估表达式并输入“真实”值之前被解析。

要解决问题，请更改：

<path d="{{getShape(data)}}"/>

到：

<path ng-attr-d="{{getShape(data)}}"/>

如果您使用其他 SVG 属性，您可能还需要这样做。例如：

<circle ng-attr-cx="{{getCentreX()}}" ng-attr-cy="{{getCentreY()}}"/>

等等

【讨论】：