ngIf

ngIf 根据表达式会移除或重新创建 DOM。

<div ng-if="!isEdit">列表</div>
<div ng-if="isEdit">编辑区</div>

以上假设 isEdit=false 时会移除编辑区DOM,反之会移除列表。正因为如此,这会导致带有位置性质的伪类(:first-child:last-child)无法被正常使用。

ngIf有着自己的 scope,虽然会继承自父 scope,但是当我们去更新数据 isEdit 值时,会重新创建一个新的 scope 并继承父 scope。

如果这里还有一个问题,当我们在某个 ngIf 下绑定某个 ‘ngModel’对象时,是不会直接同步更新到父 scope里。

ngShow

相对于 ngIf 并不会去重建 DOM,而只是单纯的设置 dispaly:none!important 的 style,所以可以最大的保证在同一个页面当中,不会倒置重建DOM引起的一些小小异常,比如数据丢失、伪类无法正常工作。