角JS - 显示/隐藏加载GIF每个新航线 [英] Angular js - show/hide loading gif every new route

问题描述

我想切换（隐藏/显示）上的每一个新的路线加载GIF，所以我的逻辑是：

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

• routeChangeStart =显示加载GIF


• routeChangeSuccess =隐藏加载GIF

这是我的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"/>

很奇怪的原因这个工程的3/4路线变更，则其停止而改变路线工作：o

什么可能呢？

这是一个活生生的例子感谢@Rob塞奇威克： http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b

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

推荐答案

的 简短的回答的：在 $ rootScope.layout.loading 改变预期。但是，如果模板被加载浏览器没有时间进行更改可见。

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

龙答案的：如果你把的console.log 在输出的 $上的听众，你会看到，一个 $ routeChangeStart 事件触发，模板被加载，之后 $ routeChangeSuccess 火灾。引擎盖下会发生以下情况：

Long answer: if you put console.log outputs in your $on listeners you will see, that a $routeChangeStart event fires, the template is loaded and after that $routeChangeSuccess fires. Under the hood the following happens:

• $ routeChangeStart 火灾


• $ rootScope.layout.loading 变成真正


• 模板被异步加载


• 的DOM更新


• 浏览器渲染加载GIF

一点点后（在XHR请求返回）

a little bit later (the xhr request returns)

• 模板加载


• $ routeChangeSuccess 火灾


• $ rootScope.layout.loading 变成假


• 的DOM更新


• 浏览器也不再显示GIF

如果tmeplates被缓存会发生什么：
- $ routeChangeStart 火灾
- $ rootScope.layout.loading 变成真正
- $ routeChangeSuccess 火灾
- $ rootScope.layout.loading 变成假
- 在DOM被更新（但是这和以前是一样的状态）

what happens if the tmeplates are cached: - $routeChangeStart fires - $rootScope.layout.loading becomes true - $routeChangeSuccess fires - $rootScope.layout.loading becomes false - the DOM is updated (but this is the same state as before)

正如你可以看到浏览器无法呈现新的状态，因为一个脚本运行不会中断给浏览器渲染DOM。如果模板尚未加载，Ajax请求停止执行脚本，并给公司的浏览器渲染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：

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

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

下面是该解决方案的plunkr：<一href=\"http://plnkr.co/edit/MkREo0Xpz5SUWg0lFCdu?p=$p$pview\">http://plnkr.co/edit/MkREo0Xpz5SUWg0lFCdu?p=$p$pview

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

这篇关于角JS - 显示/隐藏加载GIF每个新航线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！