©
이 문서에서는 PHP 중국어 웹사이트 매뉴얼 풀어 주다
ngIf
指令基于{表达式}来移除或重建DOM树的一部分。如果赋给 ngIf
的表达式计算结果为假,元素会从DOM移除,其它情况会复制一份元素插入到DOM中。
ngIf
不同于 ngShow
和 ngHide
, ngIf
是在DOM中完全移除或重建元素,而不是通过 display
css 属性改变可见。一种常见的情况是,这种差异表现在依靠一个元素在DOM的位置使用CSS选择器时,例如 :first-child
或 :last-child
伪类。
注意,当一个元素使用 ngIf
移除时,它的域会被销毁,并且当它恢复时一个新域会被创建。使用 ngIf
创建的域通过 原型继承继承它的父域。这个的重要含义是,如果在 ngIf
中使用ngModel
会绑定到一个父域的javascript原始定义。这种情况下任何修改都会使子域的变化覆盖父域的值。
同时, ngIf
使用自己编译状态来重建元素。 这种行为的一个例子是,如果一个元素的class属性在它编译后被直接修改,使用像 jQuery's .addClass()
方法等,并且元素之后被删掉。当ngIf
重建元素,class属性中已添加的类会丢失,因为会使用原始编译状态来重生成元素。
此外, 你可以通过 ngAnimate
模块来执行动画,控制 enter
和 leave
的效果。
<ANY
ng-if="">
...
</ANY>
enter - 在ngIf内容改变时发生,并且一个新DOM元素会被创建和加入到ngIf容器中。
leave - 在ngIf内容从DOM移除时发生。
点击这里 了解更多关于涉及动画的步骤。参数 | 类型 | 详述 |
---|---|---|
ngIf | expression | 如果表达式为假,元素从DOM树移除。如果为真,复制一份已编译过的元素添加到DOM树。 |
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;}