ng-if指令可以根據(jù)表達(dá)式的值true/false在DOM中真正生成或真正移除一個(gè)元素。如果賦值給ng-if的表達(dá)式的值是false蒿赢,那對(duì)應(yīng)的元素將會(huì)從DOM中移除,否則對(duì)應(yīng)元素的一個(gè)克隆將被重新插入DOM中。
ng-if同ng-show和ng-hide指令最本質(zhì)的區(qū)別是鸭轮,它不是通過(guò)CSS顯示或隱藏DOM節(jié)點(diǎn),而是真正生成或移除節(jié)點(diǎn)橄霉。
當(dāng)一個(gè)元素被ng-if從DOM中移除窃爷,同它關(guān)聯(lián)的作用域也會(huì)被銷毀。而且當(dāng)它重新加入DOM中時(shí)姓蜂,會(huì)通過(guò)原型繼承從它的父作用域生成一個(gè)新的作用域按厘。
這樣會(huì)導(dǎo)致塞颁,在 ng-if 中用基本變量綁定 ng-model 试疙,并在外層 div 中把此 model 綁定給另一個(gè)顯示區(qū)域,內(nèi)層改變時(shí)嘱根,外層不會(huì)同步改變束莫,因?yàn)榇藭r(shí)已經(jīng)是兩個(gè)變量了懒棉。
<p>{{name}}</p>
<div ng-if="true">
<input type="text" ng-model="name" />
</div>
ng-show 不存在此問(wèn)題,因?yàn)樗蛔詭б患?jí)作用域麦箍。
避免這類問(wèn)題出現(xiàn)的辦法是漓藕,始終將頁(yè)面中的元素綁定到對(duì)象的屬性(data.x)而不是直接綁定到基本變量(x)上。詳見(jiàn) AngularJS 中的作用域