javascript - 当我进行ajax调用时，尝试使用 Angular 添加加载轮？

Question

当我们进行ajax调用时，我试图实现加载轮指令，因此在响应时间内我想显示加载时间，使用下面的代码我没有看到任何错误，加载轮也没有。

有没有更好的方法使用 angularJs 实现加载轮？

或

下面的代码执行错误是什么？

main.html

<loading></loading>

<ul style="list-style: none;">
    <li ng-repeat="message in event | limitTo:1000" ng-class="{lastItem: $last}"><span>{{message.value}}</span></li>
</ul>

正在加载.js

angular.module('App', [])
  .directive('loading', function () {
      return {
        restrict: 'E',
        replace:true,
        template: '<div class="loading"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" />LOADING...</div>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
      }
  })

ctrl.js

$scope.searchServerFile = function() {
        console.log($scope.vm.search);
        if ($scope.vm.search === undefined || $scope.vm.search === null) {
            toastr.warning('A search keyword must only contain a-z, A-Z, 0-9, or space characters.');
        } else {
            $scope.loading = true;
            searchFactory.getServerSearch($scope.vm.search, searchEnv).then(function(response) {
                    $scope.modalInstance.rendered.then(function() {
                        $rootScope.$broadcast('displaySearchResults', {
                            messageObj: response.data

                        });
                        $scope.loading = false;
                    });
                }
        }

Answer 1

您可以使用指令来跟踪 ajax 请求并在一处显示/隐藏加载符号，而不是显式地显示/隐藏每个服务调用。

下面是类似的实现

将加载图标容器放置在index.html

<div class="loading-icon-container" loading>
    <div class="loading-icon">
        <img src="/image/oQ0tF.gif" width="28px" height="28px" alt="Loading..." />
    </div>
</div>

样式

.loading-icon-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 99999;
  opacity: 0.6;
}

.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  padding: 5px;
  border: 1px solid black;
}

实现loading指令

return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        scope.$watch(function() {
            return $http.pendingRequests.length > 0;
        }, function(hasPending) {
            if (hasPending) {
                element[0].style.display = '';
            } else {
                element[0].style.display = 'none';
            }
        });
    }
}

演示

angular
  .module('myApp', []);

angular
  .module('myApp')
  .controller('MyController', MyController)
  .directive('loading', loading)
  .factory('serviceFactory', serviceFactory);

MyController.$inject = ['$scope', 'serviceFactory'];

function MyController($scope, serviceFactory) {

  $scope.serviceCall = function() {
    var reqObj = {
      url: 'https://reqres.in/api/users?delay=3/photos',
      method: 'GET'
    }
    serviceFactory
      .serviceCall(reqObj)
      .then(function(data) {
        $scope.responseText = data.data;
        console.log(data);
      });
  };
}

loading.$inject = ['$http'];

function loading($http) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.$watch(function() {
        return $http.pendingRequests.length > 0;
      }, function(hasPending) {
        if (hasPending) {
          element[0].style.display = '';
        } else {
          element[0].style.display = 'none';
        }
      });
    }
  };
}

serviceFactory.$inject = ['$http'];

function serviceFactory($http) {
  var obj = {};
  obj.serviceCall = function(reqObj) {
    return $http(reqObj).then(function(success) {
      return success.data;
    });
  };
  return obj;

}

.loading-icon-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 99999;
  opacity: 0.6;
}

.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  padding: 5px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController">
  <button ng-click="serviceCall()">Servie call</button>
  <!-- loading icon -->
  <div class="loading-icon-container" loading>
    <div class="loading-icon"><img src="/image/oQ0tF.gif" width="28px" height="28px" alt="Loading..." />
    </div>
  </div>
  <!--<div ng-bind="responseText|json">
  </div>-->

</div>