ng-if和ng-show / ng-hide有什么区别

本文翻译自：What is the difference between ng-if and ng-show/ng-hide

I'm trying to understand the difference between ng-if and ng-show / ng-hide , but they look the same to me. 我试图理解ng-if和ng-show / ng-hide之间的区别，但它们看起来和我一样。

Is there a difference that I should keep in mind choosing to use one or the other? 我是否应该记住选择使用其中一种？

---

#1楼

参考：https://stackoom.com/question/1IT0G/ng-if和ng-show-ng-hide有什么区别

---

#2楼

ngIf ngIf

The ngIf directive removes or recreates a portion of the DOM tree based on an expression. ngIf指令根据ngIf 删除或重新创建 DOM树的一部分。 If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. 如果分配给ngIf的表达式求值为false值，则从DOM中删除该元素，否则将该元素的克隆重新插入到DOM中。

<!-- when $scope.myValue is truthy (element is restored) -->
<div ng-if="1"></div>

<!-- when $scope.myValue is falsy (element is removed) -->
<div ng-if="0"></div>

When an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored. 使用ngIf删除元素时，其范围将被销毁，并且在还原元素时会创建新范围。 The scope created within ngIf inherits from its parent scope using prototypal inheritance. 在ngIf创建的作用域使用原型继承从其父作用域继承。

If ngModel is used within ngIf to bind to a JavaScript primitive defined in the parent scope, any modifications made to the variable within the child scope will not affect the value in the parent scope, eg 如果在ngModel中使用ngIf绑定到父作用域中定义的JavaScript原语，则对子作用域内的变量所做的任何修改都不会影响父作用域中的值，例如

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="data">
</div>        

To get around this situation and update the model in the parent scope from inside the child scope, use an object: 要绕过这种情况并从子作用域内部更新父作用域中的模型，请使用对象：

<input type="text" ng-model="data.input">
<div ng-if="true">
    <input type="text" ng-model="data.input">
</div>

Or, $parent variable to reference the parent scope object: 或者， $parent变量引用父作用域对象：

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="$parent.data">
</div>

ngShow ngShow

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. ngShow指令根据提供给ngShow属性的表达式显示或隐藏给定的HTML元素。 The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. 通过在元素上移除或添加ng-hide CSS类来显示或隐藏元素。 The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). .ng-hide CSS类在AngularJS中预定义，并将显示样式设置为none（使用!important标志）。

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="1"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="0" class="ng-hide"></div>

When the ngShow expression evaluates to false then the ng-hide CSS class is added to the class attribute on the element causing it to become hidden. 当ngShow表达式求值为false ， ng-hide CSS类将添加到元素的class属性中，从而导致其隐藏。 When true , the ng-hide CSS class is removed from the element causing the element not to appear hidden. 如果为true ，则从元素中删除ng-hide CSS类，导致元素不显示为隐藏。

---

#3楼

The ng-if directive removes the content from the page and ng-show/ng-hide uses the CSS display property to hide content. ng-if指令从页面中删除内容， ng-show/ng-hide使用CSS display属性隐藏内容。

This is useful in case you want to use :first-child and :last-child pseudo selectors to style. 如果您想使用:first-child和:last-child伪选择器来设置样式，这非常有用。

---

#4楼

Maybe an interesting point to make, is the difference between priorities between both. 也许一个有趣的观点是两者之间的优先级之间的差异。

As far as I can tell, the ng-if directive has one of the highest (if not the highest) priority of all Angular directives. 据我所知，ng-if指令具​​有所有Angular指令中最高（如果不是最高）优先级之一。 Which means: it will run FIRST before all other, lower prioritised, directives. 这意味着：它将在所有其他更低优先级指令之前运行FIRST。 The fact that it runs FIRST, means that effectively, the element is removed before any inner directives are processed. 它运行FIRST的事实意味着有效地，在处理任何内部指令之前删除该元素。 Or at least: that's what I make of it. 或者至少：这就是我所做的。

I observerd and used this in the UI I'm building for my current customer. 我观察并在我正在为当前客户构建的UI中使用它。 The entire UI is quite heavily packed, and it had ng-show and ng-hide all over it. 整个用户界面非常庞大，并且整个界面都有ng-show和ng-hide。 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. 不要过多细节，但我构建了一个通用组件，可以使用JSON配置进行管理，所以我不得不在模板中进行一些切换。 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. 存在ng-repeat，并且在ng-repeat内部显示了一个表格，其中包含大量的ng-shows，ng-hides甚至ng-switch。 They wanted to show at least 50 repeats in the list, which would result in more or less 1500-2000 directives to be resolved. 他们希望在列表中显示至少50个重复，这将导致或多或少的1500-2000指令得到解决。 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. 我检查了代码，前面的Java后端+自定义JS需要大约150ms来处理数据，然后Angular会在显示之前咀嚼2-3秒。 The customer did not complain, but I was appalled :-) 客户没有抱怨，但我感到震惊:-)

In my search, I stumbled across the ng-if directive. 在我的搜索中，我偶然发现了ng-if指令。 Now, maybe it's best to point out that at the point of conceiving this UI, there was no ng-if available. 现在，也许最好指出，在构思这个用户界面时，没有ng-如果可用的话。 Because the ng-show and ng-hide had functions in them, which returned booleans, I could easily replace them all with ng-if. 因为ng-show和ng-hide具有返回布尔值的功能，所以我可以用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. 这意味着我退回到所评估的所有指令的大约三分之一，因此，UI加速到大约500毫秒 - 加载时间为1秒。 (I have no way to determine exact seconds) （我无法确定确切的秒数）

Do note: the fact that the directives are not evaluated, is an educated guess about what is happening underneath. 请注意：指令未被评估的事实是对下面发生的事情的有根据的猜测。

So, in my opinion: if you need the element to be present on the page (ie: for checking the element, or whatever), but simply be hidden, use ng-show/ng-hide. 因此，在我看来：如果您需要在页面上显示元素（即：用于检查元素或其他），只需隐藏，请使用ng-show / ng-hide。 In all other cases, use ng-if. 在所有其他情况下，使用ng-if。

---

#5楼

@EdSpencer is correct. @EdSpencer是对的。 If you have a lot of elements and you use ng-if to only instantiate the relevant ones, you are saving resources. 如果你有很多元素并且你使用ng-if只实例化相关元素，那么你就节省了资源。 @CodeHater is also somewhat correct, if you are going to remove and show an element very often, hiding it instead of removing it could improve performance. @CodeHater也有些正确，如果您要经常删除并显示元素，隐藏它而不是删除它可以提高性能。

The main use case I find for ng-if is that it allows me to cleanly validate and eliminte an element if the contents is illegal. 我发现ng-if的主要用例是，如果内容是非法的，它允许我干净地验证和删除元素。 For instance I could reference to a null image name variable and that will throw an error but if I ng-if and check if it's null, it's all good. 例如，我可以引用一个空图像名称变量，这将抛出一个错误，但如果我在 - 并且检查它是否为空，那一切都很好。 If I did an ng-show, the error would still fire. 如果我做了ng-show，那么错误仍然会触发。

---

#6楼

@Gajus Kuizinas and @CodeHater are correct. @ Gajus Kuizinas和@CodeHater都是对的。 Here i am just giving an example. 我在这里举个例子。 While we are working with ng-if, if the assigned value is false then the whole html elements will be removed from DOM. 当我们使用ng-if时，如果指定的值为false，那么整个html元素将从DOM中删除。 and if assigned value is true, then the html elements will be visible on the DOM. 如果赋值为true，那么html元素将在DOM上可见。 And the scope will be different compared to the parent scope. 与父范围相比，范围将有所不同。 But in case of ng-show, it wil just show and hide the elements based on the assigned value. 但是在ng-show的情况下，它只会根据指定的值显示和隐藏元素。 But it always stays in the DOM. 但它总是留在DOM中。 Only the visibility changes as per the assigned value. 只有可见性根据指定的值更改。

http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview

Hope this example will help you in understanding the scopes. 希望这个例子能帮助你理解范围。 Try giving false values to ng-show and ng-if and check the DOM in console. 尝试给ng-show和ng-if提供错误值，并在控制台中检查DOM。 Try entering the values in the input boxes and observe the difference. 尝试在输入框中输入值并观察差异。

<!DOCTYPE html>

Hello Plunker! 你好Plunker！

<input type="text" ng-model="data">
<div ng-show="true">
    <br/>ng-show=true :: <br/><input type="text" ng-model="data">
</div>
<div ng-if="true">
    <br/>ng-if=true :: <br/><input type="text" ng-model="data">
</div> 
{{data}}