javascript - 何时支持 ng-if 与 ng-show/ng-hide？

Question

据我了解ng-show和ng-hide影响元素上设置的类，并且 ng-if控制元素是否呈现为 DOM 的一部分。

是否有选择 ng-if 的指南超过ng-show/ng-hide或者反之亦然？

Answer 1

取决于您的用例，但总结一下差异:

1. ng-if 将从 DOM 中删除元素。这意味着所有附加到这些元素的处理程序或其他任何内容都将丢失。例如，如果您将一个点击处理程序绑定(bind)到一个子元素，那么当 ng-if 计算结果为 false 时，该元素将从 DOM 中删除，并且您的点击处理程序将不再工作，即使在 ng-if 稍后计算结果为 true 并显示该元素。您需要重新连接处理程序。
2. ng-show/ng-hide 不会从 DOM 中删除元素。它使用 CSS 样式来隐藏/显示元素(注意:您可能需要添加自己的类)。这样你附着在 child 身上的处理程序就不会丢失。
3. ng-if 创建子作用域，而 ng-show/ng-hide 则不会

与 ng-show/ng-hide 相比，不在 DOM 中的元素对性能的影响较小，并且使用 ng-if 时您的 Web 应用可能会显得更快>。根据我的经验，差异可以忽略不计。同时使用 ng-show/ng-hide 和 ng-if 时可以实现动画，Angular 文档中提供了这两个示例。

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