Angular js - 显示/隐藏每条新路线的加载 gif

Question

我正在尝试在每条新路线上切换（隐藏/显示）加载 gif，所以我的逻辑是：

• routeChangeStart = 显示加载 gif
• routeChangeSuccess = 隐藏加载 gif

这是我的代码：

//ANGULAR
app.run(function($rootScope) {

   $rootScope.layout = {};
   $rootScope.layout.loading = false; 

   $rootScope.$on('$routeChangeStart', function() {

      //show loading gif
      $rootScope.layout.loading = true;

   });

   $rootScope.$on('$routeChangeSuccess', function() {

      //hide loading gif
      $rootScope.layout.loading = false;

   });

   $rootScope.$on('$routeChangeError', function() {

       //hide loading gif
       alert('wtff');
       $rootScope.layout.loading = false;
   });
});

//HTML

<img src="img/loading.gif" ng-hide="!layout.loading"/>

这很奇怪，因为这适用于 3/4 路线更改，然后在更改路线时停止工作：O

可能是什么？

感谢@Rob Sedgwick，这是一个活生生的例子：http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b

Answer 1

简短回答：$rootScope.layout.loading 已按预期更改。但是如果加载了模板，浏览器就没有时间使更改可见。

长答案：如果您将console.log 输出放在您的$on 侦听器中，您将看到$routeChangeStart 事件触发，模板被加载并之后$routeChangeSuccess 触发。在引擎盖下会发生以下情况：

• $routeChangeStart 着火了
• $rootScope.layout.loading 变为 true
• 模板异步加载
• DOM 已更新
• 浏览器呈现加载中的 gif

稍后（xhr 请求返回）

• 模板已加载
• $routeChangeSuccess 着火了
• $rootScope.layout.loading 变为 false
• DOM 已更新
• 浏览器不再显示 gif

如果 tmeplates 被缓存会发生什么： - $routeChangeStart 火灾 - $rootScope.layout.loading 变为 true - $routeChangeSuccess 火灾 - $rootScope.layout.loading 变为 false - DOM 已更新（但这与之前的状态相同）

如您所见，浏览器无法呈现新状态，因为正在运行的脚本不会被中断以给浏览器时间来呈现 DOM。如果模板尚未加载，则 ajax 请求会停止脚本执行并给浏览器时间来呈现 DOM。

如何解决这个问题？

您可以使用timeout 让浏览器有时间更新 DOM：

$rootScope.$on('$routeChangeSuccess', function () {
    console.log('$routeChangeSuccess');
    //hide loading gif
    $timeout(function(){
      $rootScope.layout.loading = false;
    }, 200);
});

这是您使用此解决方案的 plunkr：http://plnkr.co/edit/MkREo0Xpz5SUWg0lFCdu?p=preview

Answer 2

（评论有点多）

我设置了代码，看到加载变量每次都没有更新，是由于模板缓存，我猜'RouteChange'没有触发。

禁用模板缓存将使您的代码每次都运行..

app.run(function($rootScope, $location, $anchorScroll, $routeParams,$templateCache) {

   $rootScope.$on('$viewContentLoaded', function() {
       $templateCache.removeAll();
    });

   ....