(14) difference between ng-if and ng-show, ng-hide directive and matters needing attention

the Ng-show, Ng-hide, and ng-if commands in Angularjs can be used to control the display or hiding of DOM elements. Ng-show and Ng-hide display or hide HTML elements based on the value of the given expression. The element is hidden when the value assigned to the ng-show instruction is false, and the element is displayed when the value is true. The Ng-hide function is similar and is used in the opposite way. Elements are displayed or hidden by changing the display property value of the CSS.

<div ng-show= "2 + 2 = 5" >2 + 2 isn ' t 5, don ' t show</div><div ng-show= "2 + 2 = 4" >2 + 2 is 4, do SHOW&L T;/div>

The ng-if directive generates or removes an element in the DOM based on the value of an expression. If the value of the expression assigned to Ng-if is false, the corresponding element is removed from the DOM, otherwise a new element is generated into the DOM. The most essential difference between ng-if and no-show and ng-hide directives is that it does not display or hide DOM nodes through CSS, but rather deletes or adds new nodes.

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

Ng-if The elements are re-created with their compiled state. If the code inside the Ng-if is modified by jquery (for example, with. addclass), then when the expression value of Ng-if is false, the DOM element is removed, and the expression becomes true again when the element and its inner child elements are reinserted into the DOM, at which point their state will be their The original state, not the state they were last removed from. That is to say, no matter what class is added with jquery, AddClass will not exist. Ng-show and Ng-hide, however, can preserve the state of the DOM element since it was last modified.

when an element is removed from the DOM by ng-if, the scope associated with it is also destroyed. And when it is re-added to the DOM, a new scope is generated from its parent scope through prototype inheritance. That is, Ng-if creates a new scope, while Ng-show and ng-hide do not.

This code is not displayed by default, and when you enter content in text, the Clear button is displayed; When you click the Clear button, the contents of text are emptied and the clear button is hidden. You can see that using the Ng-show and Ng-hide functions is completely normal. If you change ng-show to Ng-if, when you click the Clear button, you cannot clear the contents of text or hide the clear button. This is because ng-if will create new or destroy scopes, much like JavaScript's prototype inheritance. Refer to these 2 articles:JavaScript reads and modifies prototypes in particular, because the reading and writing of prototypes is not equivalent(11) The inheritance relationship of scope through the ng-repeat Directive of ANGULARJS

StackOverflow on this article, there are also questions about ng-if and ng-show differences. Here is the conclusion directly attached:
 
 

  
  
ng-ifWould remove elements from DOM. This means, all your handlers, or anything else attached to those elements would be lost. For example, if bound a click handler to one of the child elements, whenng-ifEvaluates to false, that element would be removed from DOM and your click handler won't work any more, even afterng-ifLater evaluates to true and displays the element. You'll need to reattach the handler.
  
  

  
ng-show/ng-hide   does not remove the elements from DOM. It uses CSS styles to hide/show elements (Note:you might need to add your own classes). This is your handlers that were attached to children is not being lost. 
  
  

  
ng-ifCreates a child scope while ng-show/ng-hide does not
 
 
Elements that is not in the DOM has less performance impact and your Web apps might appear to is faster when usingng-ifCompared tong-show/ng-hide. In my experience, the difference is negligible. Animations is possible when using both Ng-show/ng-hide and ng-if, with examples for both in the Angular documentation.

(14) difference between ng-if and ng-show, ng-hide directive and matters needing attention