当页面重新加载时，angularjs加载指示器不会清除

Question

使用以下代码，我的加载指示器似乎可以正常工作。但是，如果有人在浏览器中重新加载页面，加载指示符不会消失。这不会发生在索引或根目录上。使用console.log()我可以看到“加载完成”已被广播，但该指令不会被更新。有任何想法吗？

我用我的angularjs配置如下代码：

$httpProvider.interceptors.push(function($q, $rootScope) { 
    return { 
     'request': function(config) { 
      $rootScope.$broadcast('loading-started'); 
      return config || $q.when(config); 
     }, 
     'response': function(response) { 
      $rootScope.$broadcast('loading-complete'); 
      return response || $q.when(response); 
     } 
    }; 
}); 

加上以下指令：

.directive("loadingIndicator", function() { 
    return { 
     restrict : "A", 
     template: "<div>Loading...</div>", 
     link : function(scope, element, attrs) { 
      scope.$on("loading-started", function(e) { 
       element.css({"display" : "block"}); 
      }); 

      scope.$on("loading-complete", function(e) { 
       element.css({"display" : "none"}); 
      }); 
     } 
    }; 
}) 

最后，在HTML：

<div class="loading" loading-indicator></div> 

Answer 1

当Http请求失败，拦截器的响应函数将不会被调用。尝试添加'responseError'处理程序以及广播该事件。

'responseError': function(rejection) { 
    $rootScope.$broadcast('loading-complete'); 
    if (canRecover(rejection)) { 
     return responseOrNewPromise 
    } 
    return $q.reject(rejection); 
    }