Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular ng-if or ng-show responds slow (2second delay?)

I'm trying to show or hide a loading indicator on a button when a request is busy. I do that with angular by changing the $scope.loading variable when a request is loading or when it's done loading.

 $scope.login = function(){
     $scope.loading = true;
    apiFactory.getToken()
        .success(function(data){
            
        })
        .error(function(error){
            
        })
         .finally(function(){
               $timeout(function() {
                 $scope.loading = false;
               }, 0);
         });
 };

In the frontend:

<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
Log in 
<span ng-if="loading" class="ion-refreshing"></span>
</button>

This works fine, but the loading icon (ion-refreshing) is shown for about 2 seconds, while the $scope variable is updated immediately. I tried $scope.$apply but that doesn't seem to be what's wrong here, the scope is updated just fine and immediately after the request. It's just the icon that isn't responding quickly enough.

like image 373
Jorre Avatar asked Nov 14 '14 20:11

Jorre


People also ask

Which is better Ng-if or NG-show?

ng-if can only render data whenever the condition is true. It doesn't have any rendered data until the condition is true. ng-show can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives.

What is* ngIf and how does it work?

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.

Can we use ngIf and Ng-show together?

ng-if is better in this regard. Using it in place of ng-show will prevent the heavy content from being rendered in the first place if the expression is false. However, its strength is also its weakness, because if the user hides the chart and then shows it again, the content is rendered from scratch each time.

What is the difference between throwerror and delaywhen in angular?

ThrowError Delay & DelayWhen Operators in Angular delays the emission of values from the source observable. The Delay operator delays by a given timeout or until a given Date. The DelayWhen delays until it receives a notification from another observable.

What is delay and delay in angular?

Delay & DelayWhen Operators in Angular delays the emission of values from the source observable. The Delay operator delays by a given timeout or until a given Date.

How do I use the and condition in AngularJS?

The element will be added to the DOM if all conditions are fulfilled. The following example demos how AngularJS evaluates an AND condition: If only one of the conditions is true, you can use *ngIf to display the element with the help of the OR (||) operator. The following code snippet demonstrates the use of the OR condition in ngIf.

How does ng if work in HTML?

The ng-if directive’s statement evaluates to a Boolean value, such as True or False, and the element is shown on the HTML DOM according to this value. When the ng-if expression evaluation returns a False value, the element is deleted from the DOM.


Video Answer


2 Answers

Try removing ngAnimate if you're not using it from your app config and index.html page:

angular.module('myApp', [...'ngAnimate',...]) 

@Spock; if you still require the use of ngAnimate then leave your app config untouched and just add the following CSS:

.ng-hide.ng-hide-animate{      display: none !important; } 

That will hide the animated icon straight after your condition is met.

As you can see we are setting .ng-hide-animate to hidden. This is what causes the delay as it waits for the animation to complete. You can add an animation to your hide event as the class name implies instead of hiding it as in the example above.

like image 113
Palvinder Avatar answered Sep 25 '22 22:09

Palvinder


I had the same issue, and worked-around it by using ng-class with the 'hidden' class name to hide the element instead of using ng-if or ng-show/ng-hide.

like image 35
neimad Avatar answered Sep 24 '22 22:09

neimad