有决心Angularjs UI路由器抽象状态

本文介绍了有决心Angularjs UI路由器抽象状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

时有可能使与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...