CODEWITHSUNDEEP
angularjsspinnerng-show
Homan
Homan

Reputation: 26718

Why isn't ng-hide class being added after ng-show directive evaluates to false?

Our loading icon (a spinner) sometimes remains visible even though the ng-show evaluates to false.

Here is the directive:

angular.module("app.directives").directive("loadingIcon", function() {
return {
    restrict: "A",
    replace: true,
    link: function (scope, element) {

      scope.showLoader = false;

      scope.$on('event:httpRequestStarted', function () {
        // got the request start notification, show the element
        scope.showLoader = true;
      });

      scope.$on('event:httpRequestsCompleted', function () {
        // got the request completed notification, hide the element
        scope.showLoader = false;

      });
    },
    template: "<div ng-show='showLoader' class='fade-in-out loading-icon spin-fx ng-hide' ng-cloak></div>"
  }
});

and here is the httpInterceptor which broadcasts if the spinner should be on or not:

// interceptor to show loading icon
$httpProvider.interceptors.push(['$q','$rootScope', function($q, $rootScope) {
  window.requestCount = 0;

  return {
    request: function(config) {

      window.requestCount += 1;
      console.log('start request', config, window.requestCount)
      $rootScope.$broadcast('event:httpRequestStarted');
      return config || $q.when(config);
    },

    response: function(response) {

      $rootScope.$broadcast('event:httpRequestSuccess', response);
      window.requestCount -= 1;
      console.log('got response', response, window.requestCount)
      if ((window.requestCount) === 0) {
        console.log('stop spinny')
        $rootScope.$broadcast('event:httpRequestsCompleted');
      }
      return response || $q.when(response);
    },

From the console.log output, and window.requestCount, the logic is correct. And for the most part this works. But sometimes (maybe there is a race condition?), the loading icon persists with classes ng-hide-add ng-animate-active ng-hide-add-active but NO ng-hide. I thought that if ng-show was false it should add an ng-hide class?

Can anyone shed some light on what the race condition might be?

EDIT:

Yes, ngAnimate module is included in our app. Here is the css for loading icon:

.loading-icon {
  background-image: url("/images/loading-icon.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 40px;
  height: 40px;
  z-index: 100000;
  position: fixed;
  right: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}

.spin-fx {
  -moz-animation: spin-fx 2s infinite linear;
  -o-animation: spin-fx 2s infinite linear;
  -webkit-animation: spin-fx 2s infinite linear;
  animation: spin-fx 2s infinite linear;
}

// loading icon
.fade-in-out {
  transition:linear 1s;
}

.fade-in-out.ng-enter {
  opacity:0;
}

.fade-in-out.ng-enter-active {
  opacity:1;
}

.fade-in-out.ng-leave {
  opacity:1;
}

.fade-in-out.ng-leave-active {
  opacity:0;
}

I am using angular 1.2.3 and angular-animate 1.2.3

Upvotes: 3

Views: 2034

Answers (2)

Homan
Homan

Reputation: 26718

It seems it may have been a problem within angular or angular-animate itself. https://github.com/angular/angular.js/blob/master/CHANGELOG.md

I upgraded from 1.2.3 to 1.2.7 and the problem which was consistently reproducible before has now gone away. Upon inspection $('.loading-icon') shows that ng-hide class is correctly applied now.

Upvotes: 0

Tyler Eich
Tyler Eich

Reputation: 4248

scope.$on('event:httpRequestStarted', function () {
    scope.showLoader = true;
    scope.$apply(); // Apply changes
});

scope.$on('event:httpRequestsCompleted', function () {
    scope.showLoader = false;
    scope.$apply(); // Apply changes
});

AngularJS will not check for changes when using events (e.g. $on, $broadcast, $emit). $scope.apply() will check for changes manually.

Upvotes: 2

Related Questions