有决心Angularjs UI路由器抽象状态 [英] Angularjs ui-router abstract state with resolve

问题描述

时有可能使与UI路由器一个抽象的状态，需要解决数据？我需要加载与资料信息页面的上半部分，然后有一个子导航，在页面底部加载其他细节。这个想法是抽象的国家将每次加载个人资料信息，无论我在哪个孩子的状态。它似乎并没有工作。

例如：

  .STATE（'app.profile'，{
    摘要：真实，
    网址：'用户/：用户名'，
    观点：{
        内容：{
            templateUrl：意见/前端/ profile.html'，
            控制器：'ProfileCtrl'，
            解析：{
                数据：['$ stateParams'，'ProfileService'，函数（$ stateParams，ProfileService）{
                    变种的用户名= $ stateParams.username;
                    返回ProfileService.getProfile（用户名）;
                }]
            }
        }
    }
}）
.STATE（'app.profile.something'，{
    网址：''，
    观点：{
        简介：{
            templateUrl：意见/前端/ profile.something.html'，
            控制器：'ProfileCtrl'，
            解析：{
                数据：['$ stateParams'，'ProfileService'，函数（$ stateParams，ProfileService）{
                    变种的用户名= $ stateParams.username;
                    返回ProfileService.getProfileSomething（用户名）;
                }]
            }
        }
    }
}）
 

解决方案

在这里解决办法是区分解决数据的名称。检查这个答案：

• 角度UI的路由状态母公司和决心（嵌套议决）

和其 plunker

因此​​，在我们的情况下，我们就需要在父母这种变化

 解析：{
    dataParent：['$ stateParams'，'ProfileService'，函数（$ stateParams，ProfileService）{
        变种的用户名= $ stateParams.username;
        返回ProfileService.getProfile（用户名）;
    }]
}
 

和本儿童

 解析：{
    dataChild：['$ stateParams'，'ProfileService'，函数（$ stateParams，ProfileService）{
        变种的用户名= $ stateParams.username;
        返回ProfileService.getProfileSomething（用户名）;
    }]
}
 

这样，而不是与工作的决心：{数据：...}在父母子女，我们将有这些：

  //父状态
解决：{dataParent：...}
//子状态
解决：{dataChild：...}
 

例如应该比换句话说更好的...

Is it possible to make an abstract state with ui-router that needs to resolve data? I need to load the top half of a page with profile info, and then have a sub-nav that loads other details at the bottom of the page. The idea is that the abstract state would load the profile info every time regardless of which child state I am on. It doesn't seem to work.

Example:

.state('app.profile', {
    abstract: true,
    url: 'user/:username',
    views: {
        content: {
            templateUrl: 'views/frontend/profile.html',
            controller: 'ProfileCtrl',
            resolve: {
                data: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
                    var username = $stateParams.username;
                    return ProfileService.getProfile(username);
                }]
            }
        }
    }
})
.state('app.profile.something', {
    url: '',
    views: {
        profile: {
            templateUrl: 'views/frontend/profile.something.html',
            controller: 'ProfileCtrl',
            resolve: {
                data: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
                    var username = $stateParams.username;
                    return ProfileService.getProfileSomething(username);
                }]
            }
        }
    }
})

解决方案

Solution here is to distinguish the names of the resolved data. Check this answer:

• angular ui-route state parent and resolve (nested resolves)

And its plunker

So in our case we would need this change in parent

resolve: {
    dataParent: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
        var username = $stateParams.username;
        return ProfileService.getProfile(username);
    }]
}

and this in child

resolve: {
    dataChild: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
        var username = $stateParams.username;
        return ProfileService.getProfileSomething(username);
    }]
}

so, instead of working with resolve : { data: ... } in parent and child we would have these:

// parent state
resolve : { dataParent: ... } 
// child state
resolve : { dataChild: ... } 

One working example should be better than other words...

这篇关于有决心Angularjs UI路由器抽象状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！