javascript - 即使在删除元素之前条件为假，AngularJS ng-if 指令也会短暂呈现

Question

在下面的模板中，我希望脚本标签永远不会呈现，并且警报脚本永远不会执行。然而确实如此。

<div ng-if="false">
    <script>alert('should not run')</script>
    Should not appear
</div>

这导致我们在移动设备上出现巨大的性能问题，因为我们将大型 DOM 和指令结构包装在ng-ifs 中，并期望在条件为 false 时它们不会呈现。

我还测试ng-switch了哪些行为方式相同。

这是预期的行为吗？有没有办法避免不必要的渲染？

score 8 · Accepted Answer

它可能看起来很落后，但ngIf更多的是处理 DOM 的删除，而不是添加。在控制器完成实例化之前，DOM 仍然存在。这通常是一件好事，并且允许您为没有 JS 的用户（或者，初始加载状态）进行优雅的降级。

如果您不希望内部 DOM 呈现，请将其放置在指令（它自己的指令或 via ng-include）或视图中。

示例 1（了解脚本运行的原因）：

为了帮助您更好地理解流程，您可以将示例更新为：

<div ng-if="false">
    {{"Should not appear"}}
    <script>alert('should not run')</script>
</div>

你会注意到，当警报弹出时，Angular 还没有插入“不应该出现”（它出现在它的大括号中）。但是，在您解除警报后，它就会消失。

示例 2（如何防止警报）：

directive可以在此处查看隐藏“不应运行”的代码的示例： https ://jsfiddle.net/hLw0nady/4/

在此示例中，只有替换ng-if="false"为ng-if="true"才会收到警报。

score 0 · Accepted Answer

我认为错误的表达并没有很好地转换为角度错误。我可以通过设置来证明这一点：

<div ng-if="!true">

哪个不会在当前 div 中呈现文本。无论如何，它执行警报，我想它是在角度运行之前执行的，这就是原因。

2 回答 2