Question

我有一个加载图片显示在$routeChangeStart上，并在路线更改后隐藏。我试图找到可以与xhrStart和xhrSuccess一起使用的类似内容。

    $rootScope.$on('$routeChangeStart', function(){
        $rootScope.loading = true;
    });

    $rootScope.$on('$routeChangeSuccess', function(){
        $rootScope.loading = false;
    });

我知道我可以这样做：

$rootScope.loading = true;
$http.get('/api/customers').success(function(data) {
   $rootScope.loading = false;
   ...

但这很乏味。

angularJS中是否有可用于显示/隐藏加载图像的XHR事件？

Answer 1

如果加载图形是全局的，那么您可以使用httpInterceptor来解决此问题。这是一个切换$rootScope.loading的拦截器的简单实现：

angular.module('myModule').factory('LoadingInterceptor', function ($rootScope) {

        $rootScope.loading = false;

        return {
            request: function (config) {
                $rootScope.loading = true;
                return config;
            },
            response: function (response) {
                $rootScope.loading = false;
                return response;
            }
        };
    })
    .config(function ($httpProvider) {
        $httpProvider.interceptors.push('LoadingInterceptor');
    });

注意：您可能会遇到此天真实施的问题。例如，您可能有并行XHR调用（此实现将导致加载程序闪烁）。这是因为当第一个呼叫响应发生时$rootScope.loading被设置回false（即使第二个呼叫仍在进行中）。

如何显示XHR请求的加载图标？

1 个答案: