AngularJS $ http загрузка экрана совместимости

Question

Я использовал следующий угловой модуль, чтобы создать экран загрузки, пока все $ 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; 
      } 
     }; 
    }); 
}); 

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