ngIf
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.
<!-- when $scope.myValue is truthy (element is restored) -->
<div ng-if="1"></div>
<!-- when $scope.myValue is falsy (element is removed) -->
<div ng-if="0"></div>
When an element is removed using ngIf
its scope is destroyed and a new scope is created when the element is restored. The scope created within ngIf
inherits from its parent scope using prototypal inheritance.
If ngModel
is used within ngIf
to bind to a JavaScript primitive defined in the parent scope, any modifications made to the variable within the child scope will not affect the value in the parent scope, e.g.
<input type="text" ng-model="data">
<div ng-if="true">
<input type="text" ng-model="data">
</div>
To get around this situation and update the model in the parent scope from inside the child scope, use an object:
<input type="text" ng-model="data.input">
<div ng-if="true">
<input type="text" ng-model="data.input">
</div>
Or, $parent
variable to reference the parent scope object:
<input type="text" ng-model="data">
<div ng-if="true">
<input type="text" ng-model="$parent.data">
</div>
ngShow
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. The .ng-hide
CSS class is predefined in AngularJS and sets the display style to none (using an !important
flag).
<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="1"></div>
<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="0" class="ng-hide"></div>
When the ngShow
expression evaluates to false
then the ng-hide
CSS class is added to the class
attribute on the element causing it to become hidden. When true
, the ng-hide
CSS class is removed from the element causing the element not to appear hidden.
Best Answer
I think the best way to do this is to use the
$animateProvider.classNameFilter
which will allow you to filter items to animate or in this case not to animate. We'll do something like:Demo:
http://plnkr.co/edit/lbqviQ87MQoZWeXplax1?p=preview
Angular docs state:
As another answer per the comment with the
no-animate
directive, you could write anng-show
directive that will run at a higher priority and disable the animation. We will only do this if the element has thefa-spinner
class.Demo: http://plnkr.co/edit/BYrhEompZAF5RKxU7ifJ?p=preview
Lastly, and similar to the above, we can use the
no-animate
directive if we want to make it a little more modular. In this case I'm naming the directivefaSpin
which you could do in the answer above. This is essentially the same only we are preserving the directive from the SO answer mentioned in the comment of the above codeset. If you only care about thefa-spin
animation issues naming it this way works well, but if you have otherng-show
animation problems you'd want to name itngShow
and add to the if clause.Demo: http://plnkr.co/edit/P3R74mUR27QUyxMFcyf4?p=preview