?
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben
ngIf
指令基于{表達(dá)式}來(lái)移除或重建DOM樹(shù)的一部分。如果賦給 ngIf
的表達(dá)式計(jì)算結(jié)果為假,元素會(huì)從DOM移除,其它情況會(huì)復(fù)制一份元素插入到DOM中。
ngIf
不同于 ngShow
和 ngHide
, ngIf
是在DOM中完全移除或重建元素,而不是通過(guò) display
css 屬性改變可見(jiàn)。一種常見(jiàn)的情況是,這種差異表現(xiàn)在依靠一個(gè)元素在DOM的位置使用CSS選擇器時(shí),例如 :first-child
或 :last-child
偽類。
注意,當(dāng)一個(gè)元素使用 ngIf
移除時(shí),它的域會(huì)被銷毀,并且當(dāng)它恢復(fù)時(shí)一個(gè)新域會(huì)被創(chuàng)建。使用 ngIf
創(chuàng)建的域通過(guò) 原型繼承繼承它的父域。這個(gè)的重要含義是,如果在 ngIf
中使用ngModel
會(huì)綁定到一個(gè)父域的javascript原始定義。這種情況下任何修改都會(huì)使子域的變化覆蓋父域的值。
同時(shí), ngIf
使用自己編譯狀態(tài)來(lái)重建元素。 這種行為的一個(gè)例子是,如果一個(gè)元素的class屬性在它編譯后被直接修改,使用像 jQuery's .addClass()
方法等,并且元素之后被刪掉。當(dāng)ngIf
重建元素,class屬性中已添加的類會(huì)丟失,因?yàn)闀?huì)使用原始編譯狀態(tài)來(lái)重生成元素。
此外, 你可以通過(guò) ngAnimate
模塊來(lái)執(zhí)行動(dòng)畫,控制 enter
和 leave
的效果。
<ANY
ng-if="">
...
</ANY>
enter - 在ngIf內(nèi)容改變時(shí)發(fā)生,并且一個(gè)新DOM元素會(huì)被創(chuàng)建和加入到ngIf容器中。
leave - 在ngIf內(nèi)容從DOM移除時(shí)發(fā)生。
點(diǎn)擊這里 了解更多關(guān)于涉及動(dòng)畫的步驟。參數(shù) | 類型 | 詳述 |
---|---|---|
ngIf | expression | 如果表達(dá)式為假,元素從DOM樹(shù)移除。如果為真,復(fù)制一份已編譯過(guò)的元素添加到DOM樹(shù)。 |
Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
Show when checked:<span ng-if="checked" class="animate-if">
I'm removed when the checkbox is unchecked.
</span>
.animate-if {
background:white;
border:1px solid black;
padding:10px;}
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;}
.animate-if.ng-enter,.animate-if.ng-leave.ng-leave-active {
opacity:0;}
.animate-if.ng-leave,.animate-if.ng-enter.ng-enter-active {
opacity:1;}