ui-router在解析父状态之前触发子状态

时间:2015-04-23 04:42:56

标签: angularjs angular-ui-router

我正在尝试在Angular ui-router的父状态中执行一些初始化代码。初始化代码是orderService.getStoreInfo(),它返回一个promise。只有当这个承诺得到解决时,我才能触发子状态。但是,我注意到,即使在父母的承诺解决之前,孩子的状态也会被触发。我究竟做错了什么?这是'我的代码:

function configure($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('home', {
            abstract: true,
            template: '<ui-view/>',
            resolve: {
                storeInfo: /* @ngInject */ function(orderService) {
                    console.log('home: resolve - orderService.getStoreInfo()');
                    return orderService.getStoreInfo();
                }
            }
        })

        .state('home.orders', {
            url: '^/',
            template: '<my-order-list data-orders="vm.orders"></my-order-list>',
            resolve: {
                orders: /* @ngInject */ function (orderService) {
                    console.log('home.orders: resolve - orderService.getOrders()');
                    return orderService.getOrders();
                }
            },
            controller: ['orders', function (orders) {
                this.orders = orders;
            }],
            controllerAs: 'vm',
        });
}

控制台日志如下:

home: resolve - orderService.getStoreInfo()
home.orders: resolve - orderService.getOrders()
... messages from orderService.getStoreInfo() ...

这清楚地表明,即使在父州解决之前,子州仍在解雇。

1 个答案:

答案 0 :(得分:8)

答案是here:如果你想在实例化孩子之前等待答案得到解决,必须将resolve键注入子状态。因此,只需将storeInfo显式注入子状态的解析函数。