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

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


当前回答

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

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

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

其他回答

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

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

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

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

安全

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

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

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

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

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

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

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

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

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

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.