javascript – Angular js – 显示/隐藏加载gif每条新路线 - 代码日志

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

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

> routeChangeStart = show loading gif
> routeChangeSuccess = hide加载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

简短的答案:$ 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的时间。

如何解决这个问题?

您可以使用超时时间让浏览器更新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

http://stackoverflow.com/questions/21512893/angular-js-show-hide-loading-gif-every-new-route

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – Angular js – 显示/隐藏加载gif每条新路线