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

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

我用我的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>

来源

2014-05-16 Mark Lewis

而不是让指令显示/隐藏基于事件的加载指示器，为什么不把它绑定到某个状态变量（可以保存在$ rootScope中）？ – JoseM

我忘记提及可能发生的情况是，当页面上第一次绘制加载指示符时，它可能无法捕捉加载完成事件，这就是为什么我建议将它与状态联系起来 – JoseM

是否可以提供一个使用状态变量的例子？ –

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

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

来源

2014-05-16 19:42:47

我已经尝试过变体，包括responseError和requestError函数，但是我忽略了它们，因为问题依然存在或不存在。 –

默认情况下，css类“加载”是否设置为“display：none”？ –

它不是。如果可以的话，我会接受这个答案。话虽如此，我想现在我有相反的问题。如果我重新加载页面，加载指示符将不会显示。在这两种情况下，随后在界面上单击都会导致加载指示器正常工作。看起来广播没有被采取......太早了，也许？尽管如此，拥有CSS默认设置比不好。 –

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

回答

相关问题