我们来先看以下一个示例,这里我有一个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-ifng-show

ng-showng-if 有两点比较核心的区别。

  • ng-if 自己创建域,每次都会重新创建或移除DOM。
  • ng-show 只是单纯的设置 display: none !important;,无独立域。