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

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


当前回答

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-hide使用CSS的display属性隐藏内容。

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

请注意,现在发生在我身上的一件事: Ng-show通过css隐藏内容,是的,但它导致了奇怪的小故障在div的应该是按钮。

我有一个底部有两个按钮的卡,根据实际状态,一个与第三个交换,示例编辑按钮与新条目。使用ng-show=false来隐藏左边的按钮(首先出现在文件中),下面的按钮的右边框出现在卡片外面。 Ng-if通过完全不包括代码来修复这个问题。 (只是在这里检查是否有一些隐藏的惊喜使用ng-if而不是ng-show)

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

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

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

@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.