ng-if if false will remove elements from DOM. This means that all your events, directives attached to those elements will be lost. For example, ng-click to one of child elements, when ng-if evaluates to false, that element will be removed from DOM and again when it is true it is recreated. ng-show/ng-hide does not remove the elements from DOM. It uses CSS styles (.ng-hide) to hide/show elements .This way your events, directives that were attached to children will not be lost. ng-if creates a child scope while ng-show/ng-hide does not.

关于ng-if和ng-show需要注意的一件重要的事情是，当使用表单控件时，最好使用ng-if，因为它完全从dom中删除了元素。

这个区别很重要，因为如果你创建了一个required="true"的输入字段，然后设置ng-show="false"来隐藏它，当用户试图提交表单时，Chrome会抛出以下错误:

An invalid form control with name='' is not focusable.

原因是输入字段是存在的，它是必需的，但由于它是隐藏的Chrome不能关注它。这可能会破坏您的代码，因为此错误会停止脚本执行。所以要小心!

也许有趣的一点是，两者的优先级不同。

据我所知，ng-if指令是所有Angular指令中优先级最高(如果不是最高的话)的指令之一。这意味着:它将在所有其他低优先级的指令之前运行。事实上，它首先运行，意味着有效地，在任何内部指令被处理之前，元素被删除。至少，我是这么认为的。

I observerd and used this in the UI I'm building for my current customer. The entire UI is quite heavily packed, and it had ng-show and ng-hide all over it. Not to go into too much detail, but I built a generic component, which could be managed using JSON config, so I had to do some switching inside the template. There is an ng-repeat present, and inside the ng-repeat, a table is shown, which has a lot of ng-shows, ng-hides and even ng-switches present. They wanted to show at least 50 repeats in the list, which would result in more or less 1500-2000 directives to be resolved. I checked the code, and the Java backend + custom JS on the front would take about 150ms to process the data, and then Angular would chew some 2-3 seconds on it, before displaying. The customer did not complain, but I was appalled :-)

In my search, I stumbled across the ng-if directive. Now, maybe it's best to point out that at the point of conceiving this UI, there was no ng-if available. Because the ng-show and ng-hide had functions in them, which returned booleans, I could easily replace them all with ng-if. By doing so, all inner directives seemed to be no longer evaluated. That meant that I dropped back to about a third of all directives being evaluated, and thus, the UI speeded up to about 500ms - 1 sec loading time. (I have no way to determine exact seconds)

注意:指令没有被评估的事实，是对下面发生的事情的一个有根据的猜测。

所以，在我看来:如果你需要元素出现在页面上(即:检查元素，或其他)，但只是被隐藏，请使用ng-show/ng-hide。在所有其他情况下，使用ng-if。

ng-if指令从页面中删除内容，ng-show/ng-hide使用CSS的display属性隐藏内容。

如果您想使用:first-child和:last-child伪选择器来设置样式，这是非常有用的。

ng-if和ng-show的一个有趣的区别是:

安全

如果ng-if块中的DOM元素值为false，则不会被呈现

在ng-show的情况下，用户可以打开检查元素窗口并将其值设置为TRUE。

随着一声巨响，原本要隐藏的全部内容都显示出来了，这是一个安全漏洞。：）

ngIf通过删除或重新创建元素对DOM进行操作。

而ngShow应用css规则来隐藏/显示内容。

对于大多数情况(并非总是如此)，我将总结为，如果你需要一次检查来显示/隐藏东西，使用ng-if，如果你需要根据屏幕上的用户操作显示/隐藏东西(比如选中复选框然后显示文本框，未选中然后隐藏文本框等)，那么使用ng-show