angularjs – 如何在ui-router状态转换之间调出“进行中”加载栏

发布时间：2020-12-17 17:56:05 所属栏目：安全来源：网络整理

导读：我有一个使用ui-router的AngularJS应用程序.有时候应用程序在从一个状态移动到另一个状态时等待,而且两个结果仍在进行中. 有没有人(或者他们看到过)在从一个州到另一个州的解决期间如何在屏幕上呈现“正在进行中”的加载栏的任何示例？解决方法您可以使用u

我有一个使用ui-router的AngularJS应用程序.有时候应用程序在从一个状态移动到另一个状态时等待,而且两个结果仍在进行中.

有没有人(或者他们看到过)在从一个州到另一个州的解决期间如何在屏幕上呈现“正在进行中”的加载栏的任何示例？

解决方法

您可以使用ui-router(以及本机routeProvider)发出的事件.

Plunker

像这样的东西：

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

$rootScope.$on('$stateChangeSuccess',fromParams){
    $rootScope.stateIsLoading = false;
})

然后在HTML中：

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

docs

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.

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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!