ng-if和ng-show/ng-hide的区别是什么

我试图理解ng-if和ng-show/ng-hide之间的区别，但对我来说它们看起来是一样的。

在选择使用一种或另一种时，我应该记住有什么区别吗?

当前回答

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

据我所知，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。

2014-03-03 09:29:33

其他回答

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

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

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

2018-12-03 18:34:27

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

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

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

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

2017-04-22 06:13:02

@Gajus Kuizinas and @CodeHater are correct. 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. and if assigned value is true, then the html elements will be visible on the 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. But it always stays in the DOM. Only the visibility changes as per the assigned value.

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

希望这个例子能帮助你理解范围。尝试给ng-show和ng-if赋假值，并在控制台中检查DOM。尝试在输入框中输入值并观察差异。

<!DOCTYPE html>

你好砰砰作响!

<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}}

2014-11-18 04:33:04

Ng-show和ng-hide的工作方式相反。但是ng-hide或ng-show与ng-if的区别是，如果我们使用ng-if，那么元素将在dom中创建，而使用ng-hide/ng-show，元素将完全隐藏。

ng-show=true/ng-hide=false:
Element will be displayed

ng-show=false/ng-hide=true:
element will be hidden

ng-if =true
element will be created

ng-if= false
element will be created in the dom.

2017-06-19 06:50:13

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.

2016-05-27 10:37:22

ng-if和ng-show/ng-hide的区别是什么

推荐文章

最新文章

标签