AngularJS $ http 로딩 화면 호환성

Question

모든 $ http 요청이 완료 될 때까지 다음 각도 모듈을 사용하여 로딩 화면을 만들었습니다. 각도 1.0.7에서는 정상적으로 작동하지만 각도 1.2.10에서는 작동하지 않습니다. 각도 리소스와 각도 경로도 사용해야하므로 각도 1.0.7을 유지할 수 없습니다. 누구든지 최신 각도로 작업하도록 다시 작성할 수 있습니까? 각 1.2.10에서

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 
.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; 
      } 
     }; 
    }); 
}); 

Answer 1

는 angular_busy here에서보세요. 그 구현하기 꽤 쉽습니다.

페이지에서 Andy Joslin의 뛰어난 각도 약속 추적기에 대한 링크를 찾을 수 있습니다. 당신의 실험을위한 기초가되어야합니다. Here

Answer 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; 
     } 
    }; 
}); 
});