第一点区别是,ng-if
在后面表达式为 true 的时候才创建这个 dom 节点,ng-show
是初始时就创建了,用 display:block
和display:none
来控制显示和不显示。
第二点区别是,ng-if
会(隐式地)产生新作用域,ng-switch
、 ng-include
等会动态创建一块界面的也是如此。
这样会导致,在 ng-if
中用基本变量绑定 ng-model
,并在外层 div 中把此 model 绑定给另一个显示区域,内层改变时,外层不会同步改变,因为此时已经是两个变量了。
<p>{{name}}</p>
<div ng-if="true">
<input type="text" ng-model="name">
</div>
ng-show
不存在此问题,因为它不自带一级作用域。
避免这类问题出现的办法是,始终将页面中的元素绑定到对象的属性(data.x)而不是直接绑定到基本变量(x)上。