[英]Angular ui.router. Deep nested routes
Here is an example to check http://embed.plnkr.co/uVMlkk/preview 以下是检查http://embed.plnkr.co/uVMlkk/preview的示例
When we navigate to 'page2' route there is a 'hey, I'm a subroute' note. 当我们导航到'page2'路线时,有一个'嘿,我是一个子路径'的注释。 But once we navigate anywhere else that note will disappear forever. 但是一旦我们在其他任何地方导航,那笔记就会永远消失。
The goal is to make some nested states to be shown right away (as a default ones). 目标是立即显示一些嵌套状态(作为默认状态)。
I assume there should be some cases using $state.go(), but can't figure it out so far. 我假设应该有一些使用$ state.go()的情况,但到目前为止无法弄明白。 Any help is highly appreciated. 任何帮助都非常感谢。
State definition snippet: 州定义片段:
.state('root.page2.tab', {
url: '/:tabId',
templateUrl: 'tpl.page2.tab.html',
controller: 'Page2TabController'
})
.state('root.page2.tab.subroute', {
url: '',
templateUrl: 'tpl.page2.tab.subroute.html'
})
the content of the 'tpl.page2.tab.subroute.html' : 'tpl.page2.tab.subroute.html'的内容:
hey, I'm a subroute
related controller: 相关控制器:
.controller('Page2TabController', ['$scope', '$state', function($scope, $state) {
$scope.tabId = $state.params.tabId;
$state.go('root.page2.tab.subroute');
}])
There is a fixed version . 有固定版本 。
I removed the url from the 'root.page2.tab.subroute'
我从'root.page2.tab.subroute'
删除了网址
.state('root.page2.tab.subroute', {
//url: '',
templateUrl: 'tpl.page2.tab.subroute.html'
})
And because the parent has defined paramater tabId
: 并且因为父级已经定义了参数tabId
:
.state('root.page2.tab', {
url: '/:tabId',
templateUrl: 'tpl.page2.tab.html',
controller: 'Page2TabController'
})
We have to pass that param inside of the redicrection: 我们必须在redicrection中传递该参数:
.controller('Page2TabController', ['$scope', '$state', function($scope, $state) {
$scope.tabId = $state.params.tabId;
// instead of this
// $state.go('root.page2.tab.subroute');
// we need this
$state.go('root.page2.tab.subroute', $state.params);
}])
Check the working, fixed version here 在这里查看工作的固定版本
ANOTHER approach - using redirectTo
- there is a working plunker 另一种方法 - 使用redirectTo
- 有一个工作的plunker
One way, inspired by this: 一种方式,受此启发:
Redirect a state to default substate with UI-Router in AngularJS 使用AngularJS中的UI-Router将状态重定向到默认子状态
could be to add a very smart but small redirect code snippet: 可能是添加一个非常智能但小的重定向代码段:
.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params)
}
});
}])
And adjust our state like this: 并调整我们的状态:
.state('root.page2.tab', {
url: '/:tabId',
templateUrl: 'tpl.page2.tab.html',
controller: 'Page2TabController',
redirectTo: 'root.page2.tab.subroute',
})
There is a trick how to handle scenarios: 如何处理场景有一个技巧:
Parent should trigger some action in case that 家长应该触发一些行动
- it is accessed, or 它被访问,或
- its reached again, when navigating back from child in a parent state 当它从父母状态的孩子身边回来时,它再次到达
In that case, we can use the "target ( ui-view
) for a child" as a place where sits the special view
, with special controller
. 在这种情况下,我们可以使用“目标( ui-view
)为孩子”作为特殊view
,使用特殊controller
。 This will be 这将是
Enough explanation. 足够的解释。 There is a working plunker . 有一个工作的plunker 。 There is adjusted state: 有调整状态:
.state('root.page2', {
url: '/page2',
views: {
'content@root': {
templateUrl: './tpl.page2.html',
controller: 'Page2Controller'
},
'@root.page2': {
template: '<div></div>',
controller: 'RedirectorController'
}
}
})
So, now we can do some magic inside of our 'RedirectorController'
所以,现在我们可以在'RedirectorController'
做一些魔术
.controller('RedirectorController', ['$scope', '$state',
function($scope, $state) {
$state.go('root.page2.tab', { tabId: $scope.activeTabId });
}])
Check it in action here 在这里检查它
Read more about what that new view/controller get from the other (Scope Inheritance by View Hierarchy Only) one here 在此处阅读更多关于新视图/控制器从另一个获取的内容(仅按视图层次结构的范围继承)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.