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

Question

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

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

这导致我们在移动设备上出现巨大的性能问题,因为我们在ng-ifs中包含大型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"才会收到警报.