0

我使用以下角度模块来创建加载屏幕，直到所有 $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;
            }
        };
    });
});
4

2 回答 2

0 
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;
        }
    };
});
});
于 2014-02-07T14:21:36.283 回答
0

看看 angular_busy这里。它很容易实现。

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

于 2014-02-07T14:03:26.973 回答