AngularJS - 在每个新路由中显示/隐藏加载GIF

Question

我想在每次新路由加载时切换（隐藏/显示）一个loading gif，所以我的逻辑是：

• routeChangeStart = 显示 loading gif
• routeChangeSuccess = 隐藏 loading 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

- itsme

---

嗨，很想看到这里的答案。在这里，我将在“点击”上启动“加载器”（更改路由的链接），并从模板/控制器内部隐藏它（例如，当它已加载时）。可以工作，但这种方式更整洁/DRY。 - Rob Sedgwick

@RobSedgwick 不能等待回答，哈哈，我认为使用变量切换gif很酷，让我们看看是否有人可以帮忙 ;) - itsme

@RobSedgwick 如果你能的话，自己试一下，我不知道为什么它不起作用，它可以在3/4路由更改后工作，然后停止工作:( - itsme

虽然你的方法可行，但我个人认为使用请求/响应拦截器在这方面效果更好。 - Mark

Answer 1

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

详细回答: 如果在 $on 侦听器中放置 console.log 输出，则会看到发生 $routeChangeStart 事件，加载模板，然后 $routeChangeSuccess 发生。在幕后，以下情况发生：

• 触发 $routeChangeStart
• $rootScope.layout.loading 变为 true
• 异步加载模板
• 更新 DOM
• 浏览器呈现加载 gif

稍后一点（xhr 请求返回）

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

如果缓存了模板会发生什么： - 触发 $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

- michael

Answer 2

(有点长，不太适合在评论中写)

我设置代码后发现每次都没有更新加载变量，这是由于模板缓存导致的，我猜测“RouteChange”没有被触发。

禁用模板缓存将让你的代码每次都能运行..

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

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

   ....

- Rob Sedgwick

---

你知道是否可能仅从缓存中删除元素吗？:P 因为现在似乎可以工作，但我想要缓存内容 :P - itsme

可能有一种方法可以进行“硬”检查以检测“routeChanged”，但我不知道是什么。抱歉。禁用缓存以显示加载指示器感觉有点不对。为什么不在链接上触发自己的路由更改，作为ng-click的一部分 - 通过预先路由您的路由 - 所谓的（只是猜测的想法）？ - Rob Sedgwick

我只是想让它工作，因为我不明白为什么它不能工作:D 如果我不能像这样得到它，我会寻找其他的解决方法:P 谢谢你的帮助;) +1 - itsme

更新@sbaaaang，看起来它也需要注入'$route'，试试看。感谢你向我介绍这种新方法。 - Rob Sedgwick

尝试过了，但有时候它还是会停止工作 :( 我在这里尝试创建一个 Plunkr 示例 http://plnkr.co/YSsFTyZ521tU9OJoW38c ，但我无法让它正常工作 :/ - itsme

嗨，根据你的示例，我创建了一个分叉 - http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b - 它停止工作了，你是对的 - 我会从这里删除'$route'引用（我把缓存关掉了 - : S！ - Rob Sedgwick