Angular js - 显示/隐藏每个新路由加载gif

Question

我试图在每个新路由上切换(隐藏/显示)加载gif,所以我的逻辑是:

• routeChangeStart = show加载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会发生什么: - $routeChangeStartfires - $rootScope.layout.loading变成true - $routeChangeSuccessfires - $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);
});

以下是您的解决方案:http ://plnkr.co/edit/MkREo0Xpz5SUWg0lFCdu?p=preview