父状态
.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,resolve: {
DetailData: ['DetailService',function(DetailService,detailId : $stateParams.detailId};
return DetailService.getDetails(data);
}],// MetricData: ['MetricService',// 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';
}
}
}
})
… child since its not nested … Is there a way to get that metricdata property in the child?
是基于
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).
结合
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.虽然现在应该是明确的,但我们仍然需要找到一种解决方法：
… 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..
我也会说,也有答案.例如.
> 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. ..
例如.我们可以像在这个问答A：Controlling order of operations with services and controllers,见plunker：
一个特殊的父母/根状态：
$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();
}
}
})
将解决的东西传递到$范围(由每个孩子继承)
.controller('RootCtrl',function($scope,user){
$scope.user = user;
})
这被注入到我们的状态/视图层次结构之上,任何子状态都会从中获益
// any prevIoUsly root state will just use the above as a parent .state('index',{ url: '/',parent : 'root',
查看更多细节here,并在working example查看
