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

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


当前回答

关于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 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.

@EdSpencer是正确的。如果您有很多元素,并且使用ng-if只实例化相关的元素,则可以节省资源。 @CodeHater也有点正确,如果你要经常删除和显示一个元素,隐藏它而不是删除它可以提高性能。

我发现ng-if的主要用例是,如果内容是非法的,它允许我清晰地验证和消除元素。例如,我可以引用一个空图像名称变量,这将抛出一个错误,但如果我ng-if并检查它是否为空,这一切都很好。如果我执行ng-show,错误仍然会触发。

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

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

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. 

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

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

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

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