什么时候支持ng-if和ng-show / ng-hide？

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

有没有对选择的准则ng-if在ng-show/ ng-hide或反之亦然？

取决于您的用例，但总结出不同之处：

1. ng-if将从DOM中删除元素。这意味着您所有的处理程序或所有附加到这些元素的内容都将丢失。例如，如果将单击处理程序绑定到子元素之一，ng-if则将其评估为false时，将从DOM中删除该元素，并且即使ng-if稍后将其评估为true并显示该元素，您的单击处理程序也将不再起作用。您将需要重新连接处理程序。
2. ng-show/ng-hide不会从DOM中删除元素。它使用CSS样式隐藏/显示元素（注意：您可能需要添加自己的类）。这样，您依附在孩子身上的处理程序不会丢失。
3. ng-if创建一个子范围，而ng-show/ng-hide没有

与相比，不在DOM中的元素对性能的影响较小，并且ng-if与相比，您的Web应用可能看起来更快ng-show/ng-hide。以我的经验，差异可以忽略不计。当同时使用ng-show/ng-hide和时ng-if，可以使用动画，并且在Angular文档中都可以使用示例。

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

请参见此处的CodePen，它演示了ng-if / ng-show在DOM方面的工作方式的差异。

@markovuksanovic已经很好地回答了这个问题。但是我会从另一个角度来看待它：我总是会使用ng-if这些元素并将它们从DOM中删除，除非：

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

Angular的编写非常好。考虑到它的作用，速度很快。但是它的作用是使困难的事情（如2路数据绑定）看起来很容易的一大堆魔术。使所有这些事情看起来容易，会带来一些性能开销。您可能会惊讶地发现，在一个$digest周期内，甚至没有人看过的DOM，评估了setter函数的成百上千次。然后您意识到您有数十或数百个不可见元素都在做同一件事...

桌面的确可能强大到足以解决大多数JS执行速度问题。但是，如果您是为移动设备开发的，那么只要有可能，使用ng-if就可以了。JS速度在移动处理器上仍然很重要。使用ng-if是一种非常简单的方法，可以以非常非常低的成本获得潜在的重大优化。

根据我的经验：

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将在编写控制器代码方面产生巨大的差异。

答案并不简单：

它取决于目标计算机（移动设备还是台式机），取决于数据的性质，浏览器，操作系统，运行的硬件...如果您确实想知道，则需要进行基准测试。

这主要是内存与计算的问题...与大多数性能问题一样，这种差异在列表等重复元素（n）中会变得很明显，尤其是在嵌套（nxn或更糟）时，以及在这些元素中运行哪种计算时：

• ng-show：如果这些可选元素经常出现（密集）（例如90％的时间），则准备好它们并仅显示/隐藏它们可能会更快，特别是如果它们的内容便宜（纯文本，什么也没有）计算或加载）。这会消耗内存，因为它用隐藏的元素填充DOM，但是仅显示/隐藏已存在的内容对于浏览器而言可能是一种廉价的操作。

• ng-if：如果相反，可能不会显示（稀疏）元素，则只需构建它们并实时销毁它们，尤其是在获取其内容昂贵（计算/分类/过滤，图像，生成图像）的情况下。这对于稀有或“按需”元素是理想的选择，它可以在不填充DOM的情况下节省内存，但会花费大量计算（创建/销毁元素）和带宽（获取远程内容）。它还取决于视图中的计算量（过滤/排序）与模型中已有的数据（预先排序/预先过滤的数据）之间的关系。

重要说明：

ngIf（与ngShow不同）通常创建子范围，可能会产生意外结果。

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

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

因此，除非您运行太慢，否则要使用ngShow来保存头发。

无论如何，性能差异几乎没有引起注意，而且我不确定在没有测试的情况下它是谁的青睐...

如果在ng-include和ng-controller上执行ng-if，将对ng-include产生重大影响，除非ng-controller上的flag为true，否则它将不会加载所需的partial并且不会进行处理，除非flag为true是，但问题是当ng-中的标志变为false时，如果在标志变为true时它将从DOM中删除，则在这种情况下ng-show会更好，但一次显示ng-if会重新加载DOM

如果使用ng-show or ng-hide内容，则无论表达式的值如何，都将加载内容（例如，服务器中的缩略图），但将根据表达式的值进行显示。

如果您使用ng-if该内容，则仅当ng-if表达式的计算结果为true时，才会加载内容。

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