我们来先看以下一个示例,这里我有一个jsfiddle副本。
Code 1
<div class="container-fluid">
<p ng-if="!changing">
{{title}}
<button type="button" ng-click="changing = true" class="btn btn-primary">修改</button>
</p>
<p ng-if="changing">
<input type="text" class="form-control" ng-model="title" />
<button type="button" ng-click="changing = false" class="btn btn-primary">保存</button>
</p>
</div>
Code 2
<div class="container-fluid">
<p ng-show="!changing">
{{title}}
<button type="button" ng-click="changing = true" class="btn btn-primary">修改</button>
</p>
<p ng-show="changing">
<input type="text" class="form-control" ng-model="title" />
<button type="button" ng-click="changing = false" class="btn btn-primary">保存</button>
</p>
</div>
以上,会发现Code 1
无法点击修改,那么问题的根源在哪?
1、优先级。
ng-if
的优化级是600,这高于绝大部分其他原始指令,比如:ng-click
。
2、ng-if
有自己的$scope
因为每一个ng-if
都会有自己的$scope
,所以当去个性changing
值时,只会针对ng-if
的作用域。那么相对于我们的父作用域依然还是false
。
ng-if
和ng-show
ng-show
和 ng-if
有两点比较核心的区别。
ng-if
自己创建域,每次都会重新创建或移除DOM。ng-show
只是单纯的设置display: none !important;
,无独立域。
发表评论