AngularJS $ http加载屏幕兼容性

我已经使用下面的角度模块创建加载屏幕，直到所有$ http请求完成。它可以在角度1.0.7上正常工作，但在角度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); 
     }; 
    }); 
});

在角1.2.10，加载画面没有出现，但如果我把警报（）的隐藏功能里面，出现加载屏幕，直到我按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; 
      } 
     }; 
    }); 
});

来源

2014-02-07 Photovor

此版本的拦截器已被弃用。请参阅[文档]（http://docs.angularjs.org/api/ng.$http） – calebboyd

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

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

请注意，在页面上您还可以找到Andy Joslin卓越的角度承诺跟踪器的链接。这应该是你自己实验的基础。 Here

来源

2014-02-07 14:03:26 mainguy

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-07 14:21:36 Photovor

AngularJS $ http加载屏幕兼容性

回答

相关问题