14
2020
04

ng-if 跟 ng-show/hide 的区别有哪些?

第一点区别是, 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)上。


详见 AngularJS 中的作用域

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。