AngularJS Showing Busy icon when loading data

Question

i have created a small example which would show spinner when data will be loading. create directive for this because i can reuse it. problem is spinner loading all the time which is not right.

see the code and tell me where i made the mistake ?

angular.module('myApp', [])
 .directive('loading',   ['$http' ,function ($http)
 {
     return {
         restrict: 'A',
         template: '<div class="loading-spiner"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" /> </div>',
         link: function (scope, elm, attrs)
         {
             scope.isLoading = function () {
                 return $http.pendingRequests.length > 0;
             };

             scope.$watch(scope.isLoading, function (v)
             {
                 if(v){
                     elm.show();
                 }else{
                     elm.hide();
                 }
             });
         }
     };
 }])
  .controller('myController', function($scope, $http) {
      $scope.loadData = function() {
        $scope.students = [];
        $http.get('https://api.myjson.com/bins/x1rqt.json')
          .success(function(data) {
              $scope.students = data[0].students;
        });
      }

  });

jsfiddle link https://jsfiddle.net/tridip/6L6p0bgd/

Possible Duplicate of - stackoverflow.com/questions/32852676/… — Utkarsh Dubey
– Utkarsh Dubey, Commented Jun 9, 2017 at 12:15
your directive is not working because hide() and show() functions are not implemented. if u have referred the code, then the functions used there must be jquery functions. include jquery in ur project and try using jquery hide and show methods to implement your logic. — Gautam
– Gautam, Commented Jun 9, 2017 at 12:27
without jquery i solve it this way if (v) { elm.css('display', 'block'); } else { elm.css('display', 'none'); } — Monojit Sarkar
– Monojit Sarkar, Commented Jun 9, 2017 at 13:00
@MonojitSarkar .css() is jquery property, Check this URL - google.co.in/… — user7875265
– user7875265, Commented Jun 10, 2017 at 11:21

Utkarsh Dubey · Accepted Answer · 2017-06-09 23:55:01Z

2

    angular.module('myApp', [])
     
      .controller('myController', function($scope, $http) {
          $scope.loadData = function() {
            $scope.students = [];
            $scope.loading=true;
            $http.get('https://api.myjson.com/bins/x1rqt.json')
              .success(function(data) {
                  $scope.students = data[0].students;
                  $scope.loading=false;
            });
          }
          
      });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
      
        <h1>Loading spinner</h1>
        <div class="loading-spiner" ng-show="loading">
            <img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" /> 
          </div>
        <div>
            <ul ng-repeat="student in students">
                <li>{{student.name}}</li>
            </ul>
        </div>
        <button ng-click="loadData()" class="btn btn-primary">Click for Load data</button>
    </body>

Hope it will help othrewise use isolation in your derective with = scope.

edited Jun 9, 2017 at 23:55

Utkarsh Dubey

78412 silver badges33 bronze badges

answered Jun 9, 2017 at 12:02

Vitthal Mahale

547 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Monojit Sarkar Over a year ago

i just do not understand what you added in your code because you did not mention it.

Vitthal Mahale Over a year ago

do not use directve for simple logic make $scope.loading =true; and show hide your loader panel using ng-show="loading " in your html. its work

Vitthal Mahale Over a year ago

Look at following dive where i am going to show loader by using ng-show in your code, <div class="loading-spiner" ng-show="loading"> <img src="nasa.gov/multimedia/videogallery/ajax-loader.gif" /> </div> and in your controller make use varivable by default false like $scope.loading=false; once you hit http request on server then make it true before get response so loader will get visible on you screen and as soon as you get response in a success or in finally block make this varible false $scope.loading=false ; so loader div will get hide.

Monojit Sarkar Over a year ago

i post here my code just to know what was the fault in code for which spinner was showing always but you are telling me to follow different approach.

Collectives™ on Stack Overflow

AngularJS Showing Busy icon when loading data

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related