棱角分明的UI路由状态母公司和决心（嵌套议决） [英] angular ui-route state parent and resolve (nested resolves)

问题描述

我有以下情形：

1. index.html页面加载角，并且包含：用户界面视图


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


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

问题是：当我解决孩子不解决父母，
当我删除父决心，孩子解决了。

你能帮助我，让我知道我做错了？

app.js

  $ stateProvider
    .STATE（'布局'，{
        网址：
        templateUrl：'谐音/的layout.html'，
        控制器：'LayoutController'，
        摘要：真实，
        解析：{
            result_data：函数（$ Q，CommonService）
            {
                返回resolve_layout（$ Q，CommonService）
            }
        }
    }）
    .STATE（主页，{
        网址：/主页，
        templateUrl：'谐音/ homepage.html'，
        家长：'布局'，
        控制器：'HomepageController'，
        解析：{
            result_data：函数（$ Q，CommonService）
            {
                返回resolve_homepage（$ Q，CommonService）
            }
        }
    }）
 

解决方案

A 决心功能应该为工作 - 父母和孩子。还有就是要工作plunker 的链接。

结算时都将触发，和 UI路由器将等到他们两人被执行。在一个孩子，我们可以得到解决的父母的东西，以及它自己的。所以，我建议更改名称（但并不需要它），这样做是这样的：

  .STATE（'布局'，{
    网址：
    templateUrl：'谐音/的layout.html'，
    控制器：'LayoutController'，
    摘要：真实，
    解析：{
        result_data：函数（$ Q $超时）// CommonService）
        {
             //返回resolve_homepage（$ Q，CommonService）
             变种推迟= $ q.defer（）;
             $超时（函数（）{
                deferred.resolve（从父）;
             }，500）;
            返回deferred.promise;
        }
    }
}）
.STATE（主页，{
    网址：/主页，
    templateUrl：'谐音/ homepage.html'，
    家长：'布局'，
    控制器：'HomepageController'，
    解析：{
        result_data_child：函数（$ Q $超时）// CommonService）
        {
             //返回resolve_homepage（$ Q，CommonService）
             变种推迟= $ q.defer（）;
             $超时（函数（）{
                deferred.resolve（从子）;
             }，500）;
            返回deferred.promise;
        }
    }
 

现在，我们确实有两个参数可供选择： result_data 和 result_data_child 。所以这可能是我们的控制器：

  .controller（'LayoutController'，函数（$范围，$状态，result_data）{
    $ scope.state = $ state.current;
    $ scope.result_data = result_data;
}）
.controller（'HomepageController'，函数（$范围，$状态，result_data，result_data_child）{
    $ scope.state = $ state.current;
    $ scope.result_data_parent = result_data;
    $ scope.result_data_child = result_data_child;
}）
 

总结。正如我们所看到的 rel=\"nofollow\">，解决功能工作正常两种。另外的两个 （父母和子女）的必须来解决，导航到孩子时，被允许这种状态了。

I have the following scenario:

1. index.html page loads angular and contains: ui-view
2. layout.html page contains left menu that resolves data from server
3. homepage.html use layout.html as his parent but needs to resolve his own data from server.

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

解决方案

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

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

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

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.

这篇关于棱角分明的UI路由状态母公司和决心（嵌套议决）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！