Using ng-hide on a loader in a directive in Angular

Question

I've been trying to replicate the loaing example on this page (Showing Spinner GIF during $http request in angular) by @punkrockpolly. But either the example is wrong or I'm not getting something.

Basically i have a directive

 .directive('loading', ['$http', function ($http) {
    var html = '<div class="loader" data-loading></div>';
    return {
      restrict: 'E',
      replace: true,
      template: html,
      link: function (scope, element, attrs) {

        console.log(element);

        scope.isLoading = function () {
            console.log("is loading");
          return $http.pendingRequests.length > 0;
        };

        scope.$watch(scope.isLoading, function (value) {
            console.log(value);
          if (value) {
            element.removeClass('ng-hide');
          } else {
            element.addClass('ng-hide');
          }
        });
      }
    };
}]);

That I'm trying to turn on or off based on the $http request.

Here's what I have on my HTML page

 <loading></loading>

What am I missing here.

Everything is fine, your example works. Try to add `
` directly to your html and check if a spinner is showed up. — Simon Schüpbach, Jun 02 '16 at 18:23
Really. I've been trying this same code for 30 mins and I can't get it to work. I just tried it again and nothing. Am I missing something? — Showcaselfloyd, Jun 02 '16 at 18:26

score 2 · Answer 1 · answered Jun 02 '16 at 18:29

Yes it works. I don't have the css for the spinner, but the ng-hidepart works perfect.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
app.directive('loading', ['$http', function ($http) {
    var html = '<div class="loader" data-loading>test</div>';
    return {
      restrict: 'E',
      replace: true,
      template: html,
      link: function (scope, element, attrs) {

      
        scope.isLoading = function () {
      //      console.log("is loading");
          return $http.pendingRequests.length > 0;
        };
        
        // just to have some pending requests
        setInterval(function(){
           $http.get("https://www.google.com").then(function(){
       
           });
        },200)
       
        scope.$watch(scope.isLoading, function (value) {
       //     console.log(value);
          if (value) {
            element.removeClass('ng-hide');
          } else {
            element.addClass('ng-hide');
          }
        });
      }
    };
}]);

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <loading></loading>
  </body>

</html>

Okay, thanks so much. I'll give it another shot. I really appreciate it! — Showcaselfloyd, Jun 02 '16 at 18:31
Works. Thank you so much! StackExchange to the rescue once more! — Showcaselfloyd, Jun 02 '16 at 18:37

gmuraleekrishna · Answer 2 · 2016-06-02T19:14:12.350

To get app wide spinner use angular interceptors

angular.module("MyApp", ["ngResource"])

.config(function ($httpProvider) {
  $httpProvider.interceptors.push(function($q, $rootScope) {
    return {
      'request': function(config) {
          $rootScope.$broadcast('http:request:start');
          return config;
       },
       'response': function(response) {
          $rootScope.$broadcast('http:request:end');
          return $q.reject(response);
       }
     };
   });
 })

.directive('loading', ['$http', function ($http) {
    var html = '<div class="loader" data-loading></div>';
    return {
      restrict: 'E',
      replace: true,
      template: html,
      link: function (scope) {
        scope.isLoading = false;
        scope.$on('http:request:start', function() {
           scope.isLoading = true;
        });
        scope.$on('http:request:end', function() {
           scope.isLoading = false;
        });
      }
    };
}]);

Okay, this might also work. I'll try that as well. Thanks for the feedback — Showcaselfloyd, Jun 02 '16 at 18:31

Using ng-hide on a loader in a directive in Angular

2 Answers2