ng-if 和 ng-show/ng-hide 有什么区别 [英] What is the difference between ng-if and ng-show/ng-hide

问题描述

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

我应该记住选择使用其中一种或另一种的区别吗?

解决方案

ngIf

ngIf 指令根据表达式删除或重新创建 DOM 树的一部分.如果分配给 ngIf 的表达式计算结果为 false 值，则该元素将从 DOM 中删除，否则该元素的副本将重新插入 DOM 中.

<!-- 当 $scope.myValue 为真时(元素被恢复)--><div ng-if="1"></div><!-- 当 $scope.myValue 为假时(元素被移除)--><div ng-if="0"></div>

当使用 ngIf 删除元素时，它的作用域将被销毁，并在元素恢复时创建一个新的作用域.在 ngIf 中创建的作用域使用原型继承从其父作用域继承.

如果在 ngIf 中使用 ngModel 绑定到父作用域中定义的 JavaScript 原语，则对子作用域内的变量所做的任何修改都不会影响该值在父作用域中，例如

<div ng-if="true"><input type="text" ng-model="data">

要解决这种情况并从子作用域内部更新父作用域中的模型，请使用对象:

<div ng-if="true"><input type="text" ng-model="data.input">

或者，$parent 变量引用父作用域对象:

<div ng-if="true"><input type="text" ng-model="$parent.data">

ngShow

ngShow 指令根据提供给 ngShow 属性的表达式显示或隐藏给定的 HTML 元素.通过在元素上移除或添加 ng-hide CSS 类来显示或隐藏元素..ng-hide CSS 类是在 AngularJS 中预定义的，并将显示样式设置为无(使用 !important 标志).

<!-- 当 $scope.myValue 为真时(元素可见)--><div ng-show="1"></div><!-- 当 $scope.myValue 为假时(元素被隐藏)--><div ng-show="0" class="ng-hide"></div>

当 ngShow 表达式的计算结果为 false 时，ng-hide CSS 类被添加到 class元素上的属性导致它隐藏.当 true 时，ng-hide CSS 类会从元素中移除，导致元素不显示为隐藏.

I'm trying to understand the difference between ng-if and ng-show/ng-hide, but they look the same to me.

Is there a difference that I should keep in mind choosing to use one or the other?

解决方案

ngIf

The ngIf directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

<!-- when $scope.myValue is truthy (element is restored) -->
<div ng-if="1"></div>

<!-- when $scope.myValue is falsy (element is removed) -->
<div ng-if="0"></div>

When an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored. The scope created within ngIf inherits from its parent scope using prototypal inheritance.

If ngModel is used within ngIf to bind to a JavaScript primitive defined in the parent scope, any modifications made to the variable within the child scope will not affect the value in the parent scope, e.g.

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="data">
</div>        

To get around this situation and update the model in the parent scope from inside the child scope, use an object:

<input type="text" ng-model="data.input">
<div ng-if="true">
    <input type="text" ng-model="data.input">
</div>

Or, $parent variable to reference the parent scope object:

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="$parent.data">
</div>

ngShow

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="1"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="0" class="ng-hide"></div>

When the ngShow expression evaluates to false then the ng-hide CSS class is added to the class attribute on the element causing it to become hidden. When true, the ng-hide CSS class is removed from the element causing the element not to appear hidden.

这篇关于ng-if 和 ng-show/ng-hide 有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！