我试图理解ng-if和ng-show/ng-hide之间的区别,但对我来说它们看起来是一样的。
在选择使用一种或另一种时,我应该记住有什么区别吗?
我试图理解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不能关注它。这可能会破坏您的代码,因为此错误会停止脚本执行。所以要小心!