AngularJS $http 加载屏幕兼容性答案

【问题标题】：AngularJS $http loading screen compatibilityAngularJS $http 加载屏幕兼容性
【发布时间】：2014-02-07 22:21:36
【问题描述】：

我已使用以下 Angular 模块创建加载屏幕，直到所有 $http 请求完成。它适用于 angular 1.0.7，但不适用于 angular 1.2.10 。我还需要使用角度资源和角度路线，所以我不能停留在角度 1.0.7 上。谁能帮我重写它以使用最新的角度？

angular
.module('loadingOnAJAX', [])
.config(function($httpProvider) {
    var numLoadings = 0;
    var loadingScreen = $('<div style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background-color:gray;background-color:rgba(70,70,70,0.2);"><img style="position:absolute;top:50%;left:50%;" alt="" src="loading.gif" /></div>')
        .appendTo($('body')).hide();

    $httpProvider.responseInterceptors.push(function() {
        return function(promise) {
            numLoadings++;
            loadingScreen.show();
            var hide = function(r) {
                if (!(--numLoadings)){
                    loadingScreen.hide();
                }
                return r;
            };
            return promise.then(hide, hide);
        };
    });
});

在 Angular 1.2.10 中，加载屏幕不会出现，但如果我在 hide 函数中放置一个 alert()，加载屏幕会一直显示，直到我在警报上按 OK。所以我不确定是不是事情发生得太快了，还是什么。

更正版本：

angular
.module('loadingOnAJAX', [])
.config(function($httpProvider) {
    var numLoadings = 0;
    var loadingScreen = $('<div style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background-color:gray;background-color:rgba(70,70,70,0.2);"><img style="position:absolute;top:50%;left:50%;" alt="" src="loading.gif" /></div>')
        .appendTo($('body')).hide();

    $httpProvider.interceptors.push(function() {
        return {
            'request': function(config){
                numLoadings++;
                loadingScreen.show();
                return config;
            },
            'response': function(response){
                if (!(--numLoadings)){
                    loadingScreen.hide();
                }
                return response;
            }
        };
    });
});

【问题讨论】：

此版本的拦截器已被弃用。见docs
谢谢，我应该首先意识到这一点！我已经使用您建议的文档链接中的信息在上面发布了我的新工作版本。

标签： angularjs angularjs-http

【解决方案1】：

看看 angular_busy here。它很容易实现。

请注意，在该页面上，您还可以找到指向 Andy Joslin 出色的 angular-promise-tracker 的链接。这应该是你自己实验的基础。Here

【讨论】：

【解决方案2】：

angular
.module('loadingOnAJAX', [])
.config(function($httpProvider) {
var numLoadings = 0;
var loadingScreen = $('<div style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background-color:gray;background-color:rgba(70,70,70,0.2);"><img style="position:absolute;top:50%;left:50%;" alt="" src="loading.gif" /></div>')
    .appendTo($('body')).hide();

$httpProvider.interceptors.push(function() {
    return {
        'request': function(config){
            numLoadings++;
            loadingScreen.show();
            return config;
        },
        'response': function(response){
            if (!(--numLoadings)){
                loadingScreen.hide();
            }
            return response;
        }
    };
});
});

【讨论】：