何时支持ng if vs.ng show/ng hide？

Question

我知道ng-show和ng-hid会影响元素上的类集，并且ng-if控制元素是否呈现为DOM的一部分。

是否有关于选择ng（如果）而不是ng（显示）或ng（隐藏）的指南？

Answer 1

从我的经验来看：

1）如果您的页面有一个使用ng-if/ng-show显示/隐藏某些内容的切换，ng-if会导致更多的浏览器延迟（较慢）。例如：如果您有一个用于在两个视图之间切换的按钮，ng-show似乎更快。

2） 当范围的计算结果为真/假时，ng if将创建/销毁范围。如果有一个控制器连接到ng If，那么每当ng If的计算结果为true时，就会执行该控制器代码。如果您使用的是ng show，那么控制器代码只执行一次。因此，如果您有一个在多个视图之间切换的按钮，那么使用ng if和ng show将在编写控制器代码的方式上产生巨大的差异。

Answer 2

请参见此处的代码笔，该代码笔演示了ng if/ng show在DOM方面的工作方式。

@马尔科沃克萨诺维奇很好地回答了这个问题。但我从另一个角度来看：我总是使用ng if，并将这些元素从DOM中取出，除非：

1. 出于某种原因，您需要元素上的数据绑定和$watch-es在不可见时保持活动状态。如果您希望能够检查当前不可见的输入的有效性，以确定整个表单是否有效，那么表单可能就是一个很好的例子
2. 如上所述，您正在将一些非常复杂的有状态逻辑用于条件事件处理程序。这就是说，如果您发现自己手动附加和分离处理程序，以至于在使用ng if时丢失了重要状态，那么您应该问问自己，在数据模型中是否可以更好地表示该状态，并且无论何时呈现元素，都可以通过指令有条件地应用处理程序。换句话说，处理程序的存在/不存在是状态数据的一种形式。将数据从DOM中取出，并放入模型中。处理程序的存在/不存在应该由数据确定，因此很容易重新创建

Angular写得很好。考虑到它的功能，它很快。但它所做的是一系列的魔术，使困难的事情（如双向数据绑定）看起来非常简单。使所有这些事情看起来简单需要一些性能开销。您可能会惊讶地发现，在一大块DOM上，一个setter函数在$摘要周期中被求值了数百次或数千次，甚至没有人看到它。然后你意识到你有几十个或数百个不可见的元素都在做同样的事情。。。

台式机可能确实足够强大，可以让大多数JS执行速度问题变得毫无意义。但是，如果你是为移动设备开发的，只要有可能，就可以使用ng if。JS速度在移动处理器上仍然很重要。使用ng if是以非常非常低的成本获得潜在重要优化的非常简单的方法。

Answer 3

取决于您的用例，但要总结差异：

1. ng if将从DOM中删除元素。这意味着您的所有处理程序或附加到这些元素的任何其他内容都将丢失。例如，如果将一个单击处理程序绑定到其中一个子元素，当计算结果为false时，该元素将从DOM中删除，并且您的单击处理程序将不再工作，即使在稍后计算结果为true并显示该元素之后也是如此。您需要重新连接处理程序

不在DOM中的元素对性能的影响较小，与使用ng show/ng hide相比，使用ng if时，web应用程序的速度可能更快。根据我的经验，这种差别可以忽略不计。当同时使用ng show/ng hide和ng if时，可以制作动画，在角度文档中给出了这两种动画的示例。

最终，您需要回答的问题是是否可以从DOM中删除元素？