Question

我试图使用angular-busy指令触发状态变化的加载指示符。指令模板接受了承诺（cg-busy =＆＃39; myPromise＆＃39;），并且我使用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);
    });

});

为简洁而修改路线。

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）接下来，在我的控制器中，我创建了一个特殊的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的承诺结合起来定义为路由规则
在控制器中使用相同的加载器来指示路由不是准备好了
扩展实现以便实现错误消息if route无法解析所有对象

AngularJS加载指示符，带有angular-busy和$ stateChangeStart

1 个答案: