AngularJS加载数据时显示忙图标

我创建了一个小示例，它将显示加载数据时的微调器。为此创建指令，因为我可以重用它。问题是旋转器一直在加载，这是不对的

看看密码，告诉我哪里出错了

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;
        });
      }

  });

jsiddle链接

角度。模块'myApp'，[] .controller'myController'，函数$scope，$http{ $scope.loadData=函数{ $scope.students=[]； $scope.load=true； $http.get'https://api.myjson.com/bins/x1rqt.json' .successfunctiondata{ $scope.students=数据[0]。学生； $scope.load=false； }; } }; 加载旋转器 {{student.name} 单击以查看加载数据

---

我只是不明白您在代码中添加了什么，因为您没有提到它；并在html中使用ng show=加载来显示和隐藏加载程序面板。在下面的潜水中，我将通过在代码中使用ng show来显示loader，在控制器中，默认情况下使用variable false，比如$scope.loading=false；一旦你们在服务器上点击http请求，那个么在得到响应之前将其设置为真，这样加载程序就会在你们的屏幕上显示出来，一旦你们在一个成功的或最终的块中得到响应，就将这个变量设置为false$scope.load=false；所以loader div将被隐藏。我在这里发布我的代码只是想知道spinner始终显示的代码中的错误是什么，但您告诉我采用不同的方法。可能重复-您的指令不起作用，因为未实现隐藏和显示函数。如果您引用了代码，那么那里使用的函数必须是jquery函数。在您的项目中包括jquery，并尝试使用jquery隐藏和显示方法来实现您的逻辑。如果v{elm.css'display'，block'，；}或者{elm.css'display'，none'，；}@MonojitSarkar.css是jquery属性，那么没有jquery，我就用这种方法来解决它，检查此URL-还有一个-