#10 ng-if 和 ng-show

ng-if && ng-show 区别

原文地址

先看代码：

Code1 -- ng-if

<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>

Code2 -- ng-show

<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>

jsfiddle 地址

可以发现 Code1 -- ng-if 无法打开，原因如下:

1.优先级

ng-if 的优先级为 600, 高于绝大部分其它原始指令，比如 ng-click

2.ng-if 有自己的 $scope

因为每一个 ng-if 都会有自己的作用域，所以当去更新 changing 值时， 只会针对 ng-if 的作用域，而父作用域中的值不会改变

ng-if 和 ng-show 核心区别

1. ng-if 会创建作用域， 每次都会重新创建或移除DOM
2. ng-show 只是改变CSS样式，无独立的作用域， display: none !important