[英]AngularJS loading indicator with angular-busy and $stateChangeStart
I'm attempting to use the angular-busy directive to trigger a loading indicator on state change. 我正在尝试使用angular-busy指令来触发状态变化的加载指示器。 The directive template takes a promise (cg-busy='myPromise'), and I'm using ui-router for my routing.
指令模板采用承诺(cg-busy ='myPromise'),我正在使用ui-router进行路由。 What is the best way to trigger the loading indicator on state change from company.list to company.detail so that the indicator is shown while the promises are being resolved?
触发状态变化的加载指示器从company.list到company.detail的最佳方法是什么,以便在解决承诺时显示指标? My thought is to create a blank promise on $stateChangeStart, and pass that into the cg-busy template, but that doesn't seem to be working.
我的想法是在$ stateChangeStart上创建一个空白的promise,并将其传递给cg-busy模板,但这似乎不起作用。
HTML: HTML:
<div cg-busy='myPromise'></div>
<div class="h1"><h1>Companies</h1>
</div>
<table class="table table-striped table-bordered">
<table class="table table-striped table-bordered">
<tr class="h4">
<td>Company Name</td>
<td>Drugs owned</td>
</tr>
<tr ng-repeat="Item in List">
<td><a ui-sref=".detail.overview({ id:Item.id})">{{ Item.label }} <span ng-show="Item.parent_ticker.length"> ({{ Item.parent_ticker }})</span> </a></td>
<td>{{ Item.metric_applications_count }}</td>
</tr>
</table>
</table>
routes: 路线:
angular.module('company').config(function($stateProvider) {
$stateProvider.state('company', {
url: '/company',
abstract: true,
views: {
'nav': { templateUrl: 'app/main.nav.html' },
'main': { templateUrl: 'app/company/company.html' },
'list@company': { templateUrl: 'app/company/company.list.html', controller: 'CompanyListCtrl' },
'footer@': { templateUrl: 'app/main.footer.html' }
}
});
$stateProvider.state('company.list', {url: '',views: {} });
$stateProvider.state('company.detail', {
url: '/{id:[0-9]{1,4}-[0-9]{1,4}}',
resolve: {
Overview: function($stateParams, companyService){
var d = companyService.getOverview($stateParams.id);
return d;
},
Products: function($stateParams, companyService){
var d = companyService.getProducts($stateParams.id);
return d;
},
Revenues: function($stateParams, companyService){
var d = companyService.getRevenues($stateParams.id);
// not a promise
return d;
}
});
company ctrl: 公司ctrl:
angular.module('company').controller('CompanyListCtrl', function ($rootScope, $scope, $state, $stateParams, $q, utilService, companyService) {
$scope.List = companyService.getAll().$object;
$rootScope.$on("$stateChangeStart", function (ev, to, toParams, from, fromParams) {
$scope.myPromise = $q.defer();
console.log('stateChangeStart');
console.log($scope.myPromise);
});
});
redacted routes for brevity. 简化路线。
I decide to solve this problem same way as you suggest: 1) I add route event listeners in the main module, when I define the route options: 我决定以你建议的方式解决这个问题:1)当我定义路由选项时,我在主模块中添加路由事件监听器:
.run(function ($route, $rootScope, $location, $q) {
var routeDeferred;
$rootScope.$on('$routeChangeStart', function () {
routeDeferred = $q.defer();
$rootScope.changingRoutePromise = routeDeferred.promise;
});
$rootScope.$on('$routeChangeSuccess', function () {
routeDeferred.resolve();
});
$rootScope.$on('$routeChangeError', function () {
routeDeferred.reject();
});
});
2) Next, in my controller I create special promise which will be resolved when all deferred objects will be resolved (custom controller promises and route promises): 2)接下来,在我的控制器中,我创建了特殊的承诺,当所有延期对象都将被解析时(自定义控制器承诺和路由承诺)将解析:
saveDataAndLoadNextRoutePromise = $q.defer();
3) Last and most important step in Controller: I subscribe on my custom controller`s promise which post data and define the logic of the redirect to the next route: 3)Controller中最后也是最重要的一步:我订阅了我的自定义控制器的承诺,它发布数据并定义重定向到下一个路由的逻辑:
Sessions.post(data).then(function () {
$location.path('/nextstep');
// After route was changed we need to listen when all resolved params in RouteProvider will be resolved.
//So, because Js is event-oriented lang we need to allow new $routeChangeStart event to be fired first.
//In that way we exclude subscription on routeDeferred in that stack of events in order to $routeChangeStart event fired first as I said,
setTimeout(function() {
$rootScope.changingRoutePromise.then(function() {
saveDataAndLoadNextRoutePromise.resolve();
}, function() {
saveDataAndLoadNextRoutePromise.reject();
});
}, 0);
},function () {
saveDataAndLoadNextRoutePromise.reject();
$scope.isSubmitted = false;
});
4) Add the cg-busy directive with div block in HTML template page related to the Controller: 4)在与Controller相关的HTML模板页面中添加带div块的cg-busy指令:
<div cg-busy="saveSessionAndLoadNextRoutePromise">
<!-- My page -->
</div>
5) To the recap, this solution allows: 5)回顾一下,这个解决方案允许:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.