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

问题描述

我有以下场景:

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

问题是:当我解决父项时，子项没有解决，当我删除父解析时，子解析.

The problem is : when i resolve the parent the child is not resolving,when i remove the parent resolve, the child resolves.

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

can you help me, and let me know what am i doing wrong?

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

推荐答案

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

A resolve functionality should work for both - parent and child. There is a link to working plunker.

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

Both resolves will be triggered, and ui-router will wait until both of them are executed. In a child we can get the stuff resolved for parent, as well its own. So I would suggest to change the names (but it is not needed) and do it like this:

.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.所以这些可能是我们的控制器:

Now, we do have two params available: result_data and result_data_child. So these could be our controllers:

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

总结.正如我们在此处所见，解析功能对两者都有效.另外both (parent and child) 必须解决，当导航到孩子时，在允许这种状态之前.

Summary. As we can see here, resolve feature is working for both. Also both (parent and child) must be resolved, when navigating to child, before this state is allowed.

这篇关于angular ui-route state parent 和解析(嵌套解析)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！