我怎样才能弹出一个＆QUOT;正在进行＆QUOT;在UI路由器状态转换之间加载条？ [英] How can I bring up an "in progress" loading bar in between ui-router state transitions?

问题描述

我有一个使用UI路由器的AngularJS应用。有些时候，程序等待，而从一个国家转移到另一个，并同时做出决议仍在进行中。

I have an AngularJS application that uses ui-router. There are times when the application waits while moving from one state to another and while the resolves are still in progress.

有没有人有（或他们都看见）我怎么能present一个正在进行装载在屏幕上时从一个状态决心到另一个时候只是酒吧的例子？

Does anyone have (or have they seen) any examples of how I can present an "in-progress" loading bar on the screen just during the time of the resolve from the one state to another?

推荐答案

您可以使用（由发出UI路由器的事件以及本地 routeProvider ）。

You can use the events emitted by ui-router (as well as the native routeProvider).

Plunker

事情是这样的：

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

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

然后在HTML：

Then in HTML:

<section ui-view ng-hide="stateIsLoading"></section>
<div class="loader" ng-show="stateIsLoading"></div>

文档

您可以用决心来提供您的控制器内容或数据
  这是自定义的状态。决心是一个可选的地图
  依赖关系应被注入到所述控制器

You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.

如果这些依赖关系都承诺，他们将得到解决，
  转换到控制器之前的的值被实例化，以及
  $ stateChangeSuccess事件被触发

If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.

这篇关于我怎样才能弹出一个＆QUOT;正在进行＆QUOT;在UI路由器状态转换之间加载条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！