16

每次启动 ajax 调用时，我都试图在 $rootScope 上触发一个事件。

var App = angular.module('MyApp');

App.config(function ($httpProvider) {
    //add a transformRequest to preprocess request
    $httpProvider.defaults.transformRequest.push(function () {
        //resolving $rootScope manually since it's not possible to resolve instances in config blocks
        var $rootScope = angular.injector(['ng']).get('$rootScope');
        $rootScope.$broadcast('httpCallStarted');

       var $log = angular.injector(['ng']).get('$log');
       $log.log('httpCallStarted');
    });
});

事件“httpCallStarted”没有被触发。我怀疑在配置块中使用 $rootScope 或任何其他实例服务是不正确的。如果是这样，我如何在每次启动 http 调用时获取事件，而不必在每次调用时传递配置对象？

提前致谢

4

4 回答 4

17

您总是可以将 $http 包装在服务中。由于服务只设置一次，您可以让服务工厂为您设置事件。老实说，这对我来说有点骇人听闻，但这是一个很好的解决方法，因为 Angular 还没有一个全局的方法来做到这一点，除非在 1.0.3 中添加了一些我不知道的东西。

这是它的工作原理

这是代码：

app.factory('httpPreConfig', ['$http', '$rootScope', function($http, $rootScope) {
    $http.defaults.transformRequest.push(function (data) {
        $rootScope.$broadcast('httpCallStarted');
        return data;
    });
    $http.defaults.transformResponse.push(function(data){ 
        $rootScope.$broadcast('httpCallStopped');
        return data;
    })
    return $http;
}]);

app.controller('MainCtrl', function($scope, httpPreConfig) {
  $scope.status = [];

  $scope.$on('httpCallStarted', function(e) {
    $scope.status.push('started');
  });
  $scope.$on('httpCallStopped', function(e) {
    $scope.status.push('stopped');
  });

  $scope.sendGet = function (){ 
    httpPreConfig.get('test.json');    
  };
});
于 2012-12-06T15:56:44.903 回答
12

我已验证此代码将按您的预期工作。正如我上面提到的，您并没有检索您认为自己是并且需要检索用于您的应用程序的注入器。

discussionApp.config(function($httpProvider) {
  $httpProvider.defaults.transformRequest.push(function(data) {
    var $injector, $log, $rootScope;
    $injector = angular.element('#someid').injector();

    $rootScope = $injector.get('$rootScope');
    $rootScope.$broadcast('httpCallStarted');

    $log = $injector.get('$log');
    $log.log('httpCallStarted');
    return data;
  });
});
于 2012-12-07T16:35:58.057 回答
12

卡加泰是对的。更好地使用$http拦截器：

app.config(function ($httpProvider, $provide) {
    $provide.factory('httpInterceptor', function ($q, $rootScope) {
        return {
            'request': function (config) {
                // intercept and change config: e.g. change the URL
                // config.url += '?nocache=' + (new Date()).getTime();
                // broadcasting 'httpRequest' event
                $rootScope.$broadcast('httpRequest', config);
                return config || $q.when(config);
            },
            'response': function (response) {
                // we can intercept and change response here...
                // broadcasting 'httpResponse' event
                $rootScope.$broadcast('httpResponse', response);
                return response || $q.when(response);
            },
            'requestError': function (rejection) {
                // broadcasting 'httpRequestError' event
                $rootScope.$broadcast('httpRequestError', rejection);
                return $q.reject(rejection);
            },
            'responseError': function (rejection) {
                // broadcasting 'httpResponseError' event
                $rootScope.$broadcast('httpResponseError', rejection);
                return $q.reject(rejection);
            }
        };
    });
    $httpProvider.interceptors.push('httpInterceptor');
});

我认为interceptors适用于 1.1.x 之后的版本。在responseInterceptors那个版本之前有。

于 2014-01-31T03:01:26.697 回答
4

最好的方法是使用 http 拦截器。检查此链接

于 2014-01-29T23:03:36.440 回答