angularjs - ng-if 和 ng-show/ng-hide 有什么区别

Question

我试图理解 ng-if 和 ng-show/ng-hide 之间的区别，但它们看起来相同对我来说。

选择使用其中之一时我应该记住什么区别吗？

Answer 1

ngIf

ngIf 指令根据表达式删除或重新创建 DOM 树的一部分。如果分配给 ngIf 的表达式计算结果为 false 值，则该元素将从 DOM 中删除，否则该元素的克隆将重新插入到 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>

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

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

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

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

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

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

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

ngShow

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

<!-- 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>

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