javascript - 带有 angular-busy 和 $stateChangeStart 的 AngularJS 加载指示器

Question

我正在尝试使用 angular-busy 指令在状态更改时触发加载指示器。指令模板采用 promise (cg-busy='myPromise')，我正在使用 ui-router 进行路由。在状态从 company.list 更改为 company.detail 时触发加载指示器的最佳方法是什么，以便在解决 promise 时显示指示器？我的想法是在 $stateChangeStart 上创建一个空白 promise ，并将其传递到 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;
            }
        });

公司控制:

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);
    });

});

为简洁起见，对路线进行了编辑。

Answer 1

我决定按照您建议的方式解决这个问题: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) 接下来，在我的 Controller 中，我创建了特殊的 promise ，当所有延迟的对象都将被解析时，它将被解析(自定义 Controller promise 和路由 promise ):

saveDataAndLoadNextRoutePromise = $q.defer();

3) Controller 中最后也是最重要的一步:我订阅了我的自定义 Controller 的 promise ，它发布数据并定义重定向到下一条路线的逻辑:

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 block 的cg-busy指令:

<div cg-busy="saveSessionAndLoadNextRoutePromise">
    <!-- My page -->
</div>

5) 回顾一下，这个解决方案允许:

• 将自定义 Controller promise 与 routeProvider 的 promise 相结合定义路由规则
• 在 Controller 中使用相同的加载器来指示路由不是准备好了
• 扩展实现以便在以下情况下实现错误消息路由无法解析所有对象