angularjs – ng-if和ng-show/ng-hide之间的区别是什么

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中创建的作用域使用原型继承从其父作用域继承。

如果在ngIf中使用ngModel来绑定到父作用域中定义的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类将添加到元素上的类属性，导致它隐藏。当为true时，ng-hide CSS类从元素中删除，导致元素不显示为隐藏。