我正在尝试使用angular-busy指令在状态更改时触发加载指示器。指令模板承诺（cg-busy ='myPromise'），并且我使用ui-router进行路由。在状态从company.list更改为company.detail时触发加载指示器的最佳方法是什么，以便在解决承诺时显示指示器？我的想法是在$ stateChangeStart上创建一个空白承诺，并将其传递给cg-busy模板，但这似乎不起作用。
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>
路线：
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;
}
});
公司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);
});
});
为简洁起见，修订了路线。
最佳答案
我决定按照您建议的方式解决此问题：
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）接下来，在我的控制器中创建特殊的promise，当所有延迟的对象都将被解析（自定义控制器promise和路由promise）时，该promise将被解析：
saveDataAndLoadNextRoutePromise = $q.defer();
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）在与Controller相关的HTML模板页面中添加带有div块的cg-busy指令：
<div cg-busy="saveSessionAndLoadNextRoutePromise">
<!-- My page -->
</div>
5）回顾一下，该解决方案允许：
将自定义控制器承诺与routeProvider的承诺相结合
定义路由规则
在控制器中使用相同的装载机以指示路线不正确
准备好了吗
扩展实现以实现错误消息，如果
路线无法解析所有对象