我们来先看以下一个示例，这里我有一个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;，无独立域。