Angular，ui-router：更改状态时显示加载

【问题标题】：Angular, ui-router: show loading when change stateAngular，ui-router：更改状态时显示加载
【发布时间】：2015-07-10 11:24:05
【问题描述】：

当我想切换到另一个状态 (ui-sref) 时，有没有一种方法可以显示一些加载图标，直到第二个状态被加载？

【问题讨论】：

标签： angularjs angular-ui-router angularjs-routing

【解决方案1】：

是的 angular ui.router 有你可以监听的事件：

$stateChangeStart - 在过渡开始时触发。

$stateChangeSuccess - 在状态转换完成后触发。

接下来你可以编写预加载器功能

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
   $rootScope.preloader = false;
}

  $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
       $rootScope.preloader = true;
    }

在你的 body 元素中写一些 <div> 并用这个变量显示/隐藏它

例如。

<body> 
    <div ng-show="preloader"></div>
</body>

【讨论】：