Preface
The ng-if directive can really generate or really remove an element in the DOM based on the value true/false of the expression. If the value of the expression assigned to ng-if is false, the corresponding element will be removed from the DOM, otherwise a clone of the corresponding element will be reinserted into the DOM.
The most essential difference between ng-if and ng-show and ng-hide instructions is that it does not show or hide the DOM nodes through CSS, but it actually generates or removes the nodes.
When an element is removed from the DOM by ng-if, the scope associated with it is also destroyed. And when it is re-joined into the DOM, a new scope will be generated from its parent scope through prototype inheritance.
This will cause the ng-model to be bound with the basic variable in ng-if and bind this model to another display area in the outer div. When the inner layer changes, the outer layer will not change synchronously because there are already two variables.
Sample code:
<p>{{name}}</p>
<div ng-if="true">
<input type="text" ng-model="name" />
</div>
ng-show does not have this problem because it does not come with its own first-level scope.
The way to avoid this kind of problem is to always bind elements in the page to the object's property() instead of directly binding to the base variable (x). See detailsScope in AngularJS
Summarize
The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.