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

Angular js - show/hide loading gif every new route

提问by itsme

I'm trying to toggle (hide/show) a loading gif on every new route, so my logic would be:

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

• routeChangeStart = show loading gif
• routeChangeSuccess = hide loading gif

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

This is my code:

这是我的代码：

//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

//HTML

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

it is strange cause this works for 3/4 routes changed then it stop working while changing routes :O

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

what it could be?

它可能是什么？

HERE IS A LIVE EXAMPLE thanks to @Rob Sedgwick : http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b

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

回答by michael

Short answer: the $rootScope.layout.loadingchanged as expected. But if the templates are loaded the browser has no time to make the changes visible.

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

Long answer: if you put console.logoutputs in your $onlisteners you will see, that a $routeChangeStartevent fires, the template is loaded and after that $routeChangeSuccessfires. Under the hood the following happens:

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

• $routeChangeStartfires
• $rootScope.layout.loadingbecomes true
• the template gets loaded asynchronously
• the DOM is updated
• the browser renders the loading gif

• $routeChangeStart火灾
• $rootScope.layout.loading变成 true
• 模板被异步加载
• DOM 已更新
• 浏览器呈现加载 gif

a little bit later (the xhr request returns)

稍后（xhr 请求返回）

• the template was loaded
• $routeChangeSuccessfires
• $rootScope.layout.loadingbecomes false
• the DOM is updated
• the browser did no longer show the gif

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

what happens if the tmeplates are cached: - $routeChangeStartfires - $rootScope.layout.loadingbecomes true- $routeChangeSuccessfires - $rootScope.layout.loadingbecomes false- the DOM is updated (but this is the same state as before)

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

As you can see the browser can not render the new state because a script is running that is not interrupted to give the browser time to render the DOM. If the template is not yet loaded, the ajax requests stops the script execution and give's the browser time to render the DOM.

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

How to fix this?

如何解决这个问题？

You can use a timeoutthat give's the browser time to update the DOM:

你可以使用一个timeout给浏览器时间来更新 DOM 的：

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

Here is your plunkr with this solution: http://plnkr.co/edit/MkREo0Xpz5SUWg0lFCdu?p=preview

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

回答by Rob Sedgwick

( A little too much to put in a comment )

（评论有点太多了）

I set the code up and saw that the loading variable was not updated each time and was due to the template caching, I guess the 'RouteChange' is not triggered.

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

Disabling the template caching will let your code run each time ..

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

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

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

   ....