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

Question

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

我应该记住使用一个或另一个来区别吗？

Answer 1

ngIf

该ngIf指令根据表达式 删除或重新创建
DOM树的一部分。如果赋值为的表达式的ngIf计算结果为假值，则将元素从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作用域使用原型继承从其父作用域继承。

如果ngModel将其用于ngIf绑定到父范围内定义的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指令根据提供给属性的表达式 显示或隐藏 给定的HTML元素ngShow。通过删除ng- hideCSS类或将CSS类添加到元素，可以显示或隐藏该元素。的.ng- hideCSS类在AngularJS预先定义并设定的显示样式为无（使用!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-hideCSS类被添加到class所述元件上的属性使其成为隐藏。如果为true，ng- hide则从元素中删除CSS类，从而使该元素不显示为隐藏状态。