[英]UI-router accessing parent state from child
I'd like to set the title based on the state in my angular app.我想根据我的 angular 应用程序中的状态设置标题。 It works nicely, but if there's no title defined on the child state, I'd like to fall back to the parent's title property.
它工作得很好,但如果没有在子状态上定义标题,我想回到父级的标题属性。
This is what I have so far:这是我到目前为止:
In my app run block:在我的应用程序运行块中:
...
$rootScope.$on('$stateChangeSuccess', function (event, current, previous) {
if (current.hasOwnProperty('title')) {
$rootScope.title = current.title;
}
});
...
In my module's route在我的模块路线中
.state('main.parent', {
url: '/parent',
controller: 'ParentController',
controllerAs: 'vm',
templateUrl: 'app/parent.html',
title: 'Parent',
})
.state('main.parent.child', {
url: '/child',
controller: 'ChildController',
controllerAs: 'vm',
templateUrl: 'app/child.html'
})
During the code inspection, I found that $stateChangeSuccess
is triggered twice as expected, first for the parent and then for the child.在代码检查中,我发现
$stateChangeSuccess
被触发了两次,首先是父级,然后是子级。 I tried to access current.parent
when the child was called, but it has no such property.当孩子被调用时,我试图访问
current.parent
,但它没有这样的属性。 Is there any way to access it?有什么方法可以访问它吗?
UPDATE更新
I saw these questions: get parent state from ui-router $stateChangeStart , get parent state from ui-router $stateChangeStart But none of them had a clear answer to this problem (except the state splitting hack in the latter one but I'd rather avoid that).我看到了这些问题:从 ui-router $stateChangeStart 获取父状态,从 ui-router $stateChangeStart 获取父状态但是他们都没有对这个问题有明确的答案(除了后一个中的 state splitting hack 但我宁愿避免这种情况)。
The both ways are hacks a bit.这两种方式都有点小技巧。 Don't forget to import $state (and $stateParams for 2nd variant) providers in your controller.
不要忘记在您的控制器中导入 $state(和 $stateParams 用于第二个变体)提供程序。 You can use:
您可以使用:
$state.$current.parent.self.title
or或
var tree = current.name.split('.');
tree.splice(tree.length-1, 1);
var parent = tree.join('.');
$state.get(parent, $stateParams);
如果子状态上没有定义title
,您似乎只需要title
属性来回退到父级的 title 属性,我建议您使用这个存储库: angular-ui-router-title 。
So finally I came up with the following solution:所以最后我想出了以下解决方案:
I store title
inside the state's data
object, because from $state
you can't access the parent's custom properties, only the ones stored in data
(which makes sense - not to pollute the state definition with custom properties).我将
title
存储在状态的data
对象中,因为从$state
不能访问父级的自定义属性,只能访问存储在data
属性(这是有道理的 - 不要用自定义属性污染状态定义)。
.state('main.parent', {
url: '/parent',
controller: 'ParentController',
controllerAs: 'vm',
templateUrl: 'app/parent.html',
data: {
title: 'Parent'
}
})
.state('main.parent.child', {
url: '/child',
controller: 'ChildController',
controllerAs: 'vm',
templateUrl: 'app/child.html'
})
And I changed the runblock as follows:我改变了 runblock 如下:
...
$rootScope.$on('$stateChangeSuccess', function (event, toState, fromState) {
var current = $state.$current;
if (current.data.hasOwnProperty('title')) {
$rootScope.title = current.data.title;
} else if(current.parent && current.parent.data.hasOwnProperty('title')) {
$rootScope.title = current.parent.data.title;
} else {
$rootScope.title = null;
}
});
...
This is not the perfect solution yet, as in the case of multiple nested states it'd be nice to fall back to the title of the youngest ancestor's title but it does it for now.这还不是完美的解决方案,因为在多个嵌套状态的情况下,最好回退到最年轻祖先的头衔,但现在这样做了。
Simply below code is working for me下面的代码对我有用
$state.$current.parent $state.$current.parent
Looking at the UI-Router documentation in the "to" section, you could do something like below:查看“to”部分中的 UI-Router 文档,您可以执行以下操作:
$state.go('^');
to go back to the parent state.回到父状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.