Angularjs 何时支持ng if与ng show/ng hide？

我知道

ng show

和

ng hide

影响元素上设置的类，并且

ng if

控制元素是否作为DOM的一部分呈现

---

对于选择

ng if

而不是

ng show

/

ng hide

或反之，是否有指导原则？

取决于您的用例，但要总结区别：

ng if

将从DOM中删除元素。这意味着您的所有处理程序或附加到这些元素的任何其他内容都将丢失。例如，如果将单击处理程序绑定到一个子元素，当

ng if

的计算结果为false时，该元素将从DOM中删除，并且您的单击处理程序将不再工作，即使

ng if

之后的计算结果为true并显示该元素也是如此。您需要重新连接处理程序

ng show/ng hide

不会从DOM中删除元素。它使用CSS样式隐藏/显示元素（注意：您可能需要添加自己的类）。这样，附加到子级的处理程序就不会丢失

ng if

创建子作用域，而

ng show/ng hide

不创建子作用域

与

ng show/ng hide

相比，使用

ng if

时，不在DOM中的元素对性能的影响更小，并且您的web应用程序可能看起来更快。根据我的经验，差别是微不足道的。当同时使用

ng show/ng hide

和

ng if

时，可以制作动画，在角度文档中提供了这两种动画的示例

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

有关演示ng if/ng show工作方式差异的代码笔，请参见

@马尔科沃克萨诺维奇很好地回答了这个问题。但我从另一个角度来看：我总是使用

ngif

并将这些元素从DOM中取出，除非：

出于某种原因，您需要元素上的数据绑定和

$watch

-es在不可见时保持活动状态。如果您希望能够检查当前不可见的输入的有效性，以确定整个表单是否有效，那么表单可能就是一个很好的例子

如上所述，您正在使用一些非常复杂的有状态逻辑和条件事件处理程序。这就是说，如果您发现自己手动附加和分离处理程序，以至于在使用ng if时丢失了重要状态，请自问该状态是否可以更好地在数据模型中表示，并且每当呈现元素时，处理程序都会通过指令有条件地应用。换句话说，处理程序的存在/不存在是状态数据的一种形式。将数据从DOM中取出，并放入模型中。处理程序的存在/不存在应由数据决定，因此易于重新创建 我写得很好。考虑到它的功能，它很快。但它所做的是一系列的魔术，使困难的事情（如双向数据绑定）看起来非常简单。使所有这些事情看起来简单需要一些性能开销。您可能会惊讶地发现，在一大块DOM上，一个setter函数在

$digest

周期中被求值了数百次或数千次，甚至没有人看到它。然后你意识到你有几十个或几百个看不见的元素都在做同样的事情

---

桌面可能确实足够强大，足以让大多数JS执行速度问题变得毫无意义。但是，如果你是为移动设备开发的，那么在任何可能的情况下使用ng if应该是不需要动脑筋的。JS速度在移动处理器上仍然很重要。使用ng if是以非常低的成本获得潜在重要优化的非常简单的方法。

ng if on ng include和on ng controller将产生重大影响 在ng include上，它不会加载所需的部分，除非标志为true，否则不会处理 在ng控制器上，除非标志为true，否则不会加载控制器 但问题是，当标志在ng中变为false时，如果它将从DOM中删除，当标志变为true时，它将重新加载DOM。在这种情况下，ng show更好，有一次show ng if更好一个重要注意事项：

ngIf（与ngShow不同）通常创建可能产生意外结果的子作用域

我有一个与此相关的问题，我花了很多时间来弄清楚到底发生了什么

（我的指令将其模型值写入错误的范围。）

所以，如果你跑得太慢，就用ngShow来保存你的头发吧

无论怎样，性能差异都很难被注意到，我还不确定没有测试谁会喜欢它…

根据我的经验：

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

---

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

如果您使用

ng show或ng hide

内容（例如服务器上的缩略图）将被加载，与表达式的值无关，但将基于表达式的值显示

如果使用

ng If

，则仅当ng If的表达式计算结果为truthy时，才会加载内容

如果要从服务器加载数据或图像并仅根据用户交互显示这些数据或图像，则使用ng if是一个好主意。这样，您的页面加载将不会被不必要的nw密集型任务阻止。

答案不是sim卡