如何通过在 AngularJS 中绑定从无效属性中捕获 html 编译错误

Question

我对AngularJS很陌生。 所以我有一个 SVG，我需要从控制器修改它：

<svg class="rotate" viewbox="0 0 250 250">
<path transform="translate(125, 125)" d="{{user.timerAnim}}"/>
</svg>

user.timerAnim 在超时时从控制器填充。 这有效，但它会向控制台抛出异常，因为最初浏览器将 d 属性读取为无效，之后 AngularJS 绑定到它并开始正常工作。

我之前在 img 标签的 src 属性上遇到了类似的问题，它使用 ng-src 有一个解决方案

如何捕获这些错误？这不是在 AngularJS 中为 SVG 设置动画的好方法吗？

Answer 1

而不是捕获错误，这可能是由函数并从中获取 d 值，您可以使用这样的 ng-if 实现此问题

<svg class="rotate" viewbox="0 0 250 250" ng-if="user && user.timerAnim && user.timerAnim != null">
<path transform="translate(125, 125)" d="{{user.timerAnim}}"/>
</svg>

Answer 2

如果有人感兴趣，我发现你可以对任何html(和svg(属性使用ng-attr前缀来使用绑定到angularjs。所以这解决了问题：

<svg class="rotate" viewbox="0 0 250 250">
<path transform="translate(125, 125)" ng-attr-d="{{user.timerAnim}}"/>
</svg>