ng-if

使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重新插 15入DOM中。

161718

查看第12章获得更详细信息。

ng-if同no-show和ng-hide指令最本质的区别是,它不是通过CSS显示或隐藏DOM节点,而是真正生成或移除节点。

当一个元素被ng-if从DOM中移除,同它关联的作用域也会被销毁。而且当它重新加入DOM中时,会通过原型继承从它的父作用域生成一个新的作用域。

同时有一个重要的细节需要知道,ngIf重新创建元素时用的是它们编译后的状态。如果ng-if 

内部的代码加载之后被jQuery修改过(例如用.addClass),那么当ng-if的表达式值为false时,这个DOM元素会被移除,表达式再次成为true时这个元素及其内部的子元素会被重新插入DOM,此时这些元素的状态会是它们的原始状态,而不是它们上次被移除时的状态。也就是说无论用jQuery的.addClass添加了什么类都不会存在了。

     <div ng-if="2+2===5">
         Won't see this DOM node, not even in the source code

</div>

     <div ng-if="2+2===4">
         Hi, I do exist

</div>

在线示例:http://jsbin.com/ezEcamo/1/。