AngularJS directive Ng-if Precautions

Use

ng-if The instruction can be completely based on the value of the expression DOM an element is generated or removed from the If you assign a value to ng-if

The value of the expression is

false , the corresponding element will be DOM Otherwise, one of the corresponding elements is removed from the Cloning will be re-inserted

Into

DOM the.

Ng-if

withno-showand theNg-hideThe most essential difference of instruction is that it is not throughCSSShow or hideDOMnode, and

is to actually build or remove the node.

When an element is

ng-if from DOM is removed, the scope associated with it is also destroyed. And when it re-joins the DOM

, a new scope is generated from its parent scope through prototype inheritance.

At the same time there is an important detail to know,

Ngif The elements are re-created with their compiled state. If ng-if

The internal code is loaded after the

JQuerymodified (for example, with. AddClass), then whenng-ifthe expression value isfalsewhen the

This one

DOM the element is removed and the expression becomes true this element and its inner child elements are reinserted.

Dom

, the states of these elements will be their original state, not the state they were last removed from. Other words

Whether using

JQuery of the . AddClass What classes are added will not exist.

<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>

AngularJS directive Ng-if Precautions