Question

我需要制作一些能够向用户显示仍在执行ajax请求的内容。

我有一个角度模块：

var myModule = angular.module('myModule', [
    'ngRoute',
    'ngCookies',
    'localization',
    'myControllers',
    'myServices'
]);

我的服务如下：

var myServices = angular.module('myServices', ['ngResource']);
myServices.factory('MyInfo', ['$resource',function($resource){
    return $resource('/api/:method', {}, {
        getSettings: {method:'POST', params:{method:'get_my_settings'}},
        getInfo: {method:'POST',params:{method:'get_my_info'}}
    });
}]);

我的控制员：

var myControllers = angular.module('myControllers', []);
myControllers.controller('someCtrl', ['$scope', 'MyInfo',
   function($scope, MyInfo) {
      $scope.myInfo = MyInfo.getInfo();
   }
]);

一切正常！但是，如果请求完成并收到响应，我怎样才能在发送请求之前开始执行某些操作并完成此操作？

jquery中的ajax具有参数“beforeSend”和“complete”，您可以在其中定义在发送之前和请求完成时要执行的操作。

如何以角度进行操作？

由于

Answer 1

Angular允许您访问具有$http属性的pendingRequests模块。

例如参见：https://github.com/angular-app/angular-app/blob/master/client/src/common/services/httpRequestTracker.js

他们正在创建服务：

angular.module('services.httpRequestTracker', [])

.factory('httpRequestTracker', ['$http',
    function($http) {

        var httpRequestTracker = {};
        httpRequestTracker.hasPendingRequests = function() {
            return $http.pendingRequests.length > 0;
        };

        return httpRequestTracker;
    }
])

然后，您现在可以创建一个指令，用于在此服务返回待处理请求时显示ajax加载程序（或其他任何内容）：

angular.module('directives.ajaxLoader', [
    'services.httpRequestTracker'
])

.directive('ajaxLoader', ['httpRequestTracker',
    function(httpRequestTracker) {
        return {
            templateUrl: 'common/ajaxLoader.tpl.html',
            restrict: 'EA',
            replace: true,
            scope: true,
            link: function($scope) { // This function can have more parameters after $scope, $element, $attrs, $controller
                $scope.hasPendingRequests = function() {
                    return httpRequestTracker.hasPendingRequests();
                };
            }
        };
    }
])

ajaxLoader.tpl.html：

<div class="fade" ng-class="{in: hasPendingRequests(), out: !hasPendingRequests()}">
    LOADING ...
</div>

希望这有帮助

如何在角度服务中加载指示器

1 个答案: