Question

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

看到代码并告诉我我犯了哪个错误？

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/

Answer 1

    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>

希望它可以帮助你在= scope中保持使用隔离。

AngularJS在加载数据时显示忙碌图标

1 个答案: