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

Posted 2023-03-28

【中文标题】如何通过在 AngularJS 中绑定来捕获来自无效属性的 html 编译错误

【英文标题】：How to catch html compile errors from invalid attributes by binding in AngularJS

【发布时间】：2020-09-19 21:11:39

【问题描述】：

我对 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 设置动画的好方法吗？

【参考方案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>

【讨论】：

@user1094553 是 user.timerAnim 的初始值未定义还是不同？

最初是在控制器中设置的

@user1094553 好的，我明白了，在我修改答案时尝试做

不，我仍然遇到相同的错误，但相同的错误更少 - 即使我设置了 ng-if="false"

，仍在某处评估 d 属性

@user1094553 你能用codesandbox.io或其他任何在线编辑器来实现你的例子吗？看来您还有其他问题

【参考方案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>