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加載屏幕兼容性

回答

相關問題