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

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

CSS类或将CSS类添加到元素，可以显示或隐藏该元素。的

.ng-hide

CSS类在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" ></div>

当

ngShow

表达式求

false

则

ng-hide

CSS类被添加到

class

所述元件上的属性使其成为隐藏。如果为

true

，

ng-hide

则从元素中删除CSS类，从而使该元素不显示为隐藏状态。