我试图理解ng-if和ng-show / ng-hide的区别,但它们看起来和我一样。
有什么区别,我应该记住选择使用一个或另一个?
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中创建的作用域使用原型继承从其父作用域继承。
如果在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类从元素中删除,导致元素不显示为隐藏。