Question

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

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

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

我也测试了ng-switch，其行为方式相同。

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

Answer 1

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

如果您不希望渲染内部DOM，请将其放在指令（自己的指令，或通过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"才会收到提醒。

Answer 2

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

<div ng-if="!true">

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