如何在ui-router中继承解析数据 [英] How to inherit resolve data in ui-router
问题描述
我这里有一个棘手的情况.我的父状态和子状态都覆盖了顶层(index.html)的相同 ui 视图.因此，当它从父级进入子状态时，范围会被破坏(我认为?)基本上父级有一个存储在 MetricData 属性中的解析，我似乎无法从子级访问它，因为它没有嵌套我是假设.有没有办法在孩子中获取该 metricdata 属性，而不必在孩子中再次手动调用相同的 ajax 调用
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
父状态
.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';
}
}
}
})
子状态
.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. 问题的答案:
... child 因为它未嵌套 ... 有没有办法在孩子中获取该 metricdata 属性?
... child since its not nested ... Is there a way to get that metricdata property in the child?
基于
子状态确实从父状态继承以下内容:
Child states DO inherit the following from parent states:
- 通过resolve解决依赖
- 自定义数据属性
没有其他内容被继承(没有控制器、模板、网址等).
Nothing else is inherited (no controllers, templates, url, etc).
结合
请记住，只有在状态的视图嵌套时，范围属性才会沿状态链向下继承.范围属性的继承与状态的嵌套无关视图(模板)的嵌套.
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).
完全有可能您有嵌套状态，其模板填充您网站内各个非嵌套位置的 ui-view.在这种情况下，您不能期望在子状态的视图中访问父状态视图的范围变量.
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. 虽然现在应该很清楚了，我们仍然需要找到一种方法来解决:
... 有没有办法在子中获取该metricdata属性而不必在子中再次手动调用相同的ajax调用..
我想说，也有答案.例如
And I would say, there is also answer. E.g.
.. 将共享视图/解析器移动到最小公分母...
.. move the shared views/resolvers to the least common denominator. ..
例如我们可以像在这个 Q &A:控制服务和控制器的操作顺序，请参阅plunker:
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();
}
}
})
将解析的东西传递到 $scope(由每个孩子继承)
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',
这篇关于如何在ui-router中继承解析数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
