2
Reply

AngularJS Showing Busy icon when loading data

tri_inn

tri_inn

Jun 9 2017 8:03 AM
208
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 ?
  1. angular.module('myApp', [])  
  2. .directive('loading', ['$http' ,function ($http)  
  3. {  
  4. return {  
  5. restrict: 'A',  
  6. template: '<div class="loading-spiner"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" /> </div>',  
  7. link: function (scope, elm, attrs)  
  8. {  
  9. scope.isLoading = function () {  
  10. return $http.pendingRequests.length > 0;  
  11. };  
  12.   
  13. scope.$watch(scope.isLoading, function (v)  
  14. {  
  15. if(v){  
  16. elm.show();  
  17. }else{  
  18. elm.hide();  
  19. }  
  20. });  
  21. }  
  22. };  
  23. }])  
  24. .controller('myController', function($scope, $http) {  
  25. $scope.loadData = function() {  
  26. $scope.students = [];  
  27. $http.get('https://api.myjson.com/bins/x1rqt.json')  
  28. .success(function(data) {  
  29. $scope.students = data[0].students;  
  30. });  
  31. }  
  32.   
  33. }); 
jsfiddle link https://jsfiddle.net/tridip/6L6p0bgd/

Answers (2)