0

我需要做一些事情来向用户显示 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”，您可以在其中定义发送前和请求完成时要做什么。

如何在角度做到这一点？

谢谢

4

1 回答 1

0

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>

希望这可以帮助

于 2014-04-14T10:25:10.917 回答