there is a ng-if animation example in this doc:https://docs.angularjs.org/api/ng/directive/ngIf
if you clicking the checkbox quickly and repeatedly,you will find more than one element will be displayed,I don't know how to avoid it.
This happens because ngIf behaves different to ngShow for example. ngShow simply adds a display: none style to the element that must be hidden, while ngIf does the following:
The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM, otherwise a
clone of the element is reinserted into the DOM.
So if the animation takes a bit long, there will be more than one element in the DOM.
In Olivvv's example, if you just change the delay of .animate-if.ng-enter, .animate-if.ng-leave to 0.001s you will se that you cannot get more than one element.
Here for you to see it is a forked version of the official AngularJS documentation. http://plnkr.co/edit/ok7nwOIRpR1TYYRkBRXj?p=preview
I have only modified its delay from 0.5s to 0.001s
Related
This question already has answers here:
What is the difference between ng-if and ng-show/ng-hide
(12 answers)
Closed 5 years ago.
I was going through ng-if , ng-show and ng-hide but not completely gain it, all three of them doing the same thing so why there is three directive for one purpose?
The Differences
Both ng-show and ng-if receive a condition and hide from view the directive’s element in case the condition evaluates to false. The mechanics they use to hide the view, though, are different.
ng-show (and its sibling ng-hide) toggle the appearance of the element by adding the CSS display: none style.
ng-if, on the other hand, actually removes the element from the DOM when the condition is false and only adds the element back once the condition turns true.
Since ng-show leaves the elements alive in the DOM, it means that all of their watch expressions and performance cost are still there even though the user doesn’t see the view at all. In cases where you have a few big views that are toggled with ng-show you might be noticing that things are a bit laggy (like clicking on buttons or typing inside input fields).
If you just replace that ng-show with an ng-if you might witness considerable improvements in the responsiveness of your app because those extra watches are no longer happening.
That’s it: replace ng-show and ng-hide with ng-if!
The difference between ng-if and ng-show/ng-hide is that ng-if would not insert html fragment into the DOM if the condition results in false while ng-show/ng-hide would always insert html into the DOM but make it either visible or invisible.
I am using a datepicker control on my page which is rendered through ng-if dependent on a specific dropdown value.
The problem I'm facing is since at the time of rendering, that datepicker input is not part of DOM, so later when I change the value of dropdown, the datepicker control does not work.
If I use ng-show, I encounter issues in validations.
Any suggestions?
Thanks.
Use ng-show/ng-hide instead of ng-if, because the ng-if directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ng-if evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
More details. please refer this link : what is the difference between ng-if and ng-show/ng-hide
Try "$scope.apply()" after the toggling of ng-if variable.
The code I am working on has this:
<div ng-if="cos.connectMessage" style="text-align: center;" class="ng-scope">
Unable to establish a connection to the localhost server for 5 minutes.</div>
Is there any advantage to using ng-show or ng-if to control the visibility of this message?
ng-show
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. (reference)
ng-if
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. (reference)
Note: When ng-if removes the element it also removes the associated scope for that element and it get recreated when condition turns true.
Advantage
I prefer the use of ng-if specifically when number of watchers bound inside the element is more as it would completely destroy the scope so making the UI a bit faster. But for small elements or elements containing less watchers does cost overhead of removing scope and recreating it.
You can refer this for your solution, already lot of things asked in that
what is the difference between ng-if and ng-show/ng-hide
If you are using ng-if="false" then html content under ng-if will not includ in your html page, but if you are using ng-hide="true" or ng-show="false" then html part includ in your html page but it will only in hidden mode.
I understand that ng-show and ng-hide affect the class set on an element and that ng-if controls whether an element is rendered as part of the DOM
Are there any examples on choosing ng-if over ng-show/ng-hide or vice-versa?
You've already summed it up in your question. If you want to show and hide the DOM depending on a condition, use ng-show. This works well for DOM transitions between workflows, tabs, sections, etc.
<div ng-show="vm.tab == 'products'"></div>
If you only want to conditionally render the DOM if a condition occurs, use ng-if. This is particularly useful for permissions where you aren't interested in exposing any more DOM than necessary.
<button ng-if="vm.data.allowSubmit" ng-click="vm.submit()" />
If there is some information what you dont want to show to user any how.
You want that user cant see it anyhow even after editing DOM from inspect element then use ng-if otherwise use ng-show.
ng-show renders the dom but if condition is false then element display will be invisible.
`ng-if` renders the `dom` only if condition is true
There are situations when you are force to use ng-show
ex: Consider you are using any jquery plugin which runs on dom ready on any element. If element is getting rendered later when ng-if gets true then jquery will not work. In this case you will be need to use ng-show
I am creating a new directive and I wondering how to be notified when angular remove the element from the DOM.
My aim is to add a jquery animation when an element is removed.
If you are trying to animate the removal of element you need to do this before it is removed.
I've created a fiddle demonstrating this.
In the first section you listen the $destroy event that angular call to elements that are being removed from DOM.
In the second case I've created a directive that fadeOut and remove the element automatic.
In the third case the directive just fadeOut the element and the removal is passed to controller.
If you want to fadeOut the element that are removed then you can't use the first option.
Between the second and the third I personally suggest the third because it is more flexible.