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

Question

我有以下场景:

index.html 页面加载 angular 并包含:ui-view

layout.html 页面包含解析来自服务器的数据的左侧菜单

homepage.html 使用 layout.html 作为他的父级，但需要从服务器解析他自己的数据。

问题是:当我解决父级问题时， child 没有解决，
当我删除父解析时，子解析。

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

应用程序.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功能应该适用于 parent 和 child 。有一个链接到working plunker .

两个解析都会被触发，并且 ui-router将等到它们都被执行。在 child 中，我们可以为 parent 解决问题，也可以解决自己的问题。所以我建议更改名称(但不需要)并这样做:

.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 :

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

概括。如我们所见 here ，解析功能对两者都有效。还有 两者 ( parent 和 child ) 必须在导航到 child 时，在允许此状态之前解决。