如何继承UI路由器的数据解析 [英] How to inherit resolve data in ui-router
问题描述
我这里有一个棘手的情况。我的父母州和子状态都覆盖在顶层（的index.html）相同的用户界面视图。因此，当它进入孩子的状态从父范围被分解（我想？）基本上母公司拥有其存储在MetricData财产的决心，我似乎不能从孩子访问以来没有嵌套我假设。有没有办法让孩子的metricdata财产无需手动在孩子再次调用相同的Ajax调用
父状态
.STATE（home.metric，{
URL：/分类/：的categoryId /公制/：metricId /名/：metricName
观点：{ 主@：{ templateUrl：
功能（stateParams）{
//后来移到这一个实用程序功能
VAR tempName = UNESCAPE（stateParams.metricName）;
tempName = tempName.replace（/ \\秒/克， - ）; 回报../partials/slides/'+ tempName +'的.html';
}，
解析：{
MetricData：['MetricService'，'$ stateParams'，
功能（MetricService，$ stateParams）{
VAR数据= {的categoryId：$ stateParams.categoryId，metricId：$ stateParams.metricId};
返回MetricService.getMetricDetails（数据）;
}]
}，
controllerProvider：
功能（$ stateParams）{
VAR tempName = UNESCAPE（$ stateParams.metricName）;
tempName = tempName.replace（/ \\ S + /克，''）; 返回tempName + Ctrl键;
}
}
} }）
子状态
.STATE（home.metric.detail，{
网址：/ detailId /：detailId / detailName /：detailName
观点：{ 主@：{
templateUrl：
功能（$ stateParams）{
//后来移到这一个实用程序功能
VAR tempName = UNESCAPE（$ stateParams.detailName）;
tempName = tempName.replace（/ \\秒/克， - ）; 回报../partials/slides/'+ tempName +'的.html';
}，
解析：{
DetailData：['DetailService'，'$ stateParams'，
功能（DetailService，$ stateParams）{
VAR数据= {的categoryId：$ stateParams.categoryId，detailId：$ stateParams.detailId};
返回DetailService.getDetails（数据）;
}]，
// MetricData：['MetricService'，'$ stateParams'，
//功能（MetricService，$ stateParams）{
// VAR数据= {的categoryId：$ stateParams.categoryId，metricId：$ stateParams.metricId};
//返回MetricService.getMetricDetails（数据）;
//}]
}，
controllerProvider：
功能（$ stateParams）{
VAR tempName = UNESCAPE（$ stateParams.detailName）;
tempName = tempName.replace（/ \\ S + /克，''）; 返回tempName + Ctrl键;
}
} } }）
我答案的问题：
... 孩子自没有嵌套 ...有没有办法让孩子的metricdata财产？
是基于
What做儿童的国家从父项继承国？
儿童州继承父州以下内容：
- 通过解析解析的依赖
- 自定义数据属性
闲来无事是继承（没有控制器，模板，网址等）。
在同一起选择
Scope通过视图层次只有
继承
记记住，如果你的状态在意见嵌套的作用域属性只继承下来的状态链。作用域属性的继承无关，与你的国家的嵌套和一切与您的意见（模板）嵌套。
的这是完全可能的您已经嵌套状态的模板，在站点内的各种非嵌套位置填充UI的意见。在这种情况下，你的不能指望访问父状态的变量的作用域儿童的意见中意见陈述。的
II 虽然这应该是现在很清楚，的我们还是需要找到一种方法如何解决：
... 有没有办法以获取metricdata财产在孩子的无需手动调用相同的AJAX 在孩子再打电话..
和我说，有也是一种回答。例如。
..移动共享视图/分解器的最小公分母。 ..
例如。我们可以像在这个Q＆放大器;答：操作为了控制与服务和控制器，看到的 plunker ：
一个特别盛大的父/根状态：
$ stateProvider
.STATE（'根'，{
摘要：真实，
//见下文高清控制器
控制器：'RootCtrl'，
//这是模板，下面讨论 - 非常重要
模板：'＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;，
//用于解决只有一次，但适用于所有国家的儿童
解析：{
用户：功能（authService）{
返回authService.getUserDetails（）;
}
}
}）传递解决塞给$范围（由每个孩子继承）
.controller（'RootCtrl'，函数（$范围，用户）{
$ scope.user =用户;
}）这是注入我们的国家/视图层次的顶部，和任何子状态会从中获利。
//任何previously根状态只会使用上述作为父母
.STATE（'指数'，{
网址：'/'，
父：'根'，I have a tricky situation here. my parent state and child state are both overriding the same ui view at the top level(index.html). So when it goes to the child state from the parent the scope gets broken(I think?) Basically the parent has a resolve which is stored in the MetricData property that I can't seem to access from the child since its not nested I am assuming. Is there a way to get that metricdata property in the child without having to manually call the same ajax call again in the child
parent state
.state("home.metric", { url: "/category/:categoryId/metric/:metricId/name/:metricName", views: { 'main@': { templateUrl: function (stateParams){ //move this to a util function later var tempName = unescape(stateParams.metricName); tempName = tempName.replace(/\s/g, "-"); return '../partials/slides/' + tempName + '.html'; }, resolve: { MetricData: ['MetricService', '$stateParams', function(MetricService, $stateParams){ var data = { categoryId : $stateParams.categoryId, metricId : $stateParams.metricId}; return MetricService.getMetricDetails(data); }] }, controllerProvider: function ($stateParams) { var tempName = unescape($stateParams.metricName); tempName = tempName.replace(/\s+/g, ''); return tempName + 'Ctrl'; } } } })child state
.state("home.metric.detail", { url: "/detailId/:detailId/detailName/:detailName", views: { 'main@': { templateUrl: function ($stateParams){ //move this to a util function later var tempName = unescape($stateParams.detailName); tempName = tempName.replace(/\s/g, "-"); return '../partials/slides/' + tempName + '.html'; }, resolve: { DetailData: ['DetailService', '$stateParams', function(DetailService, $stateParams){ var data = { categoryId : $stateParams.categoryId, detailId : $stateParams.detailId}; return DetailService.getDetails(data); }], // MetricData: ['MetricService', '$stateParams', // function(MetricService, $stateParams){ // var data = { categoryId : $stateParams.categoryId, metricId : $stateParams.metricId}; // return MetricService.getMetricDetails(data); // }] }, controllerProvider: function ($stateParams) { var tempName = unescape($stateParams.detailName); tempName = tempName.replace(/\s+/g, ''); return tempName + 'Ctrl'; } } } })
解决方案I. The answer to question:
... child since its not nested ... Is there a way to get that metricdata property in the child?
Is based on
What Do Child States Inherit From Parent States?
Child states DO inherit the following from parent states:
- Resolved dependencies via resolve
- Custom data properties
Nothing else is inherited (no controllers, templates, url, etc).
in conjuction with
Scope Inheritance by View Hierarchy Only
Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).
It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.
II. While this should be clear now, we still need to find a way how to solve:
... Is there a way to get that metricdata property in the child without having to manually call the same ajax call again in the child..
And I would say, there is also answer. E.g.
- Angular UI Router Nested State resolve in child states
- How do I prevent reload on named view, when state changes? AngularJS UI-Router
.. move the shared views/resolvers to the least common denominator. ..
E.g. we can do it like in this Q & A: Controlling order of operations with services and controllers, see the plunker:
A special grand parent / root state:
$stateProvider .state('root', { abstract : true, // see controller def below controller : 'RootCtrl', // this is template, discussed below - very important template: '<div ui-view></div>', // resolve used only once, but for available for all child states resolve: { user: function (authService) { return authService.getUserDetails(); } } })Passing resolved stuff into $scope (inherited by each child)
.controller('RootCtrl', function($scope,user){ $scope.user = user; })This is injected on top of our state / view hierarchy, and any child state would profit from it
// any previously root state will just use the above as a parent .state('index', { url: '/', parent : 'root',Check more details here and see it in a working example
这篇关于如何继承UI路由器的数据解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
