Question

我有以下情况：

index.html页面加载角度并包含：ui-view
layout.html页面包含解析服务器数据的左侧菜单
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功能应该对父母和孩子都有效。有working 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;
})

概要。我们可以看到here，解析功能对两者都有效。在导航到子级之前， （父级和子级） 必须必须才能解决此问题。

angular ui-route state parent和resolve（嵌套解析）

1 个答案: