當頁面重新加載時，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); 
    }