angular ui-route state parent和resolve(嵌套解析)

Question

我有以下场景:

1. index.html页面加载角度并包含:ui-view
2. layout.html页面包含解析服务器数据的左侧菜单
3. homepage.html使用layout.html作为其父级,但需要从服务器解析自己的数据.

问题是:当我解析父节点时子节点没有解析时,当我删除父节点时,子节点会解析.

你能帮帮我吗,让我知道我做错了什么？

app.js

$stateProvider
    .state('layout', {
        url: "",
        templateUrl: 'partials/layout.html',
        controller:'LayoutController',
        abstract:true,
        resolve : {
            result_data: function ($q,CommonService)
            {
                return resolve_layout($q,CommonService)
            }
        }
    })
    .state('homepage', {
        url: "/homepage",
        templateUrl: 'partials/homepage.html',
        parent: 'layout',
        controller:'HomepageController',
        resolve : {
            result_data: function ($q,CommonService)
            {
                return resolve_homepage($q,CommonService)
            }
        }
    })

Answer 1

一个resolve功能应适用于双方-父母和孩子.有一个工作的plunker链接.

两个结算将被触发,ui-router并将等到它们都被执行.在孩子中,我们可以为父母解决这些问题,也可以自己解决问题.所以我建议更改名称(但不需要)并像这样做:

.state('layout', {
    url: "",
    templateUrl: 'partials/layout.html',
    controller:'LayoutController',
    abstract:true, 
    resolve : {
        result_data: function ($q, $timeout)//,CommonService)
        {
             //return resolve_homepage($q,CommonService)
             var deferred = $q.defer();
             $timeout(function(){
                deferred.resolve("from a parent");
             }, 500);
            return deferred.promise;
        } 
    }
})
.state('homepage', {
    url: "/homepage",
    templateUrl: 'partials/homepage.html',
    parent: 'layout',
    controller:'HomepageController',
    resolve : {
        result_data_child: function ($q, $timeout)//,CommonService)
        {
             //return resolve_homepage($q,CommonService)
             var deferred = $q.defer();
             $timeout(function(){
                deferred.resolve("from a child");
             }, 500);
            return deferred.promise;
        }
    } 

现在,我们确实有两个参数:result_data和result_data_child.所以这些可能是我们的控制器:

.controller('LayoutController', function ($scope, $state, result_data) {
    $scope.state = $state.current;
    $scope.result_data = result_data;
})
.controller('HomepageController', function ($scope, $state, result_data, result_data_child) {
    $scope.state = $state.current;
    $scope.result_data_parent = result_data;
    $scope.result_data_child  = result_data_child;
})

摘要.正如我们在这里看到的,解析功能对两者都有效.另外两个 (父母和子女) 必须导航到孩子时,被允许这种状态之前得到解决.