子路由不触发 [英] Child route does not trigger
问题描述
我正在构建这个路线系统
var app = angular.module('plunker', ['ui.router']);app.config(function ($stateProvider, $urlRouterProvider) {$urlRouterProvider.when('/admin', '/admin/dashboard').when('/user', '/user/dashboard').otherwise('/admin/dashboard');$stateProvider.state('管理员', {网址:'/管理员/仪表板'，解决: {测试:函数(){console.log('叫管理员');返回;}},意见:{'导航': {模板:'<div>管理导航.转到 <a ui-sref="admin.link1">link1</a></div>'},'内容': {模板:'<div>管理仪表板</div>'}}}).state('admin.link1', {//由于某种原因 admin.link1 不起作用但只是 link1 是可以的url: '/admin/link1',解决: {测试:函数(){console.log('admin.link1 调用了 resolve');返回;}},意见:{'导航': {模板:'<div>管理导航</div>'},'内容': {模板:'<div>admin link1</div>'}}}).state('用户', {url: '/用户/仪表板',意见:{'导航': {模板:'<div>用户导航</div>'},'内容': {模板:'<div>用户仪表板</div>'}}});});HTML 将包含 navigation 和 content ui-view
<div><a ui-sref="admin">Admin</a><a ui-sref="user">用户</a><div ui-view="导航"></div><div ui-view="内容"></div>
我想点击 link1 并转到 admin.link1 状态，但不知何故不起作用.
但如果我删除 admin 父级并仅使用 link1，它工作正常.
代码:http://plnkr.co/edit/F7lw58esXz7rWzeo3ER6?p=preview
预览:http://embed.plnkr.co/F7lw58esXz7rWzeo3ER6/preview
有什么线索吗?
你就快到了，更新的 plunker.嵌套视图只有一项更改附加了符号 '@':
.state('admin.link1', {url: '/admin/link1',解决: {测试:函数(){console.log('admin.link1 调用了 resolve');返回;}},意见:{//而不是这个//'导航': {//我们必须在末尾使用@ 使用绝对名称'导航@': {模板:'<div>管理导航</div>'},//这是在父视图中搜索的//'内容': {//这是针对根'内容@': {模板:'<div>admin link1</div>'}}})该点隐藏在绝对视图命名，摘录:
<块引用>在幕后，每个视图都被分配一个绝对名称，遵循 viewname@statename 方案，其中 viewname 是视图指令和状态名称中使用的名称是状态的绝对名称，例如联系方式.您还可以选择以绝对语法编写视图名称.
请尝试阅读此答案，我尝试深入描述视图命名的含义.(搜索最后一个部分:EXTEND:给出评论的答案)
I am building this route system
var app = angular.module('plunker', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.when('/admin', '/admin/dashboard')
.when('/user', '/user/dashboard')
.otherwise('/admin/dashboard');
$stateProvider
.state('admin', {
url: '/admin/dashboard',
resolve: {
test: function() {
console.log('called admin');
return;
}
},
views: {
'navigation': {
template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
},
'content': {
template: '<div>admin dashboard</div>'
}
}
})
.state('admin.link1', { //for some reason admin.link1 does not work but just link1 is OK
url: '/admin/link1',
resolve: {
test: function() {
console.log('admin.link1 called resolve');
return;
}
},
views: {
'navigation': {
template: '<div>admin navigation</div>'
},
'content': {
template: '<div>admin link1</div>'
}
}
})
.state('user', {
url: '/user/dashboard',
views: {
'navigation': {
template: '<div>user navigation</div>'
},
'content': {
template: '<div>user dashboard</div>'
}
}
});
});
The HTML will have navigation and content ui-view in it
<body ng-app="plunker">
<div>
<a ui-sref="admin">Admin</a>
<a ui-sref="user">User</a>
</div>
<div ui-view="navigation"></div>
<div ui-view="content"></div>
</body>
I want to click on link1 and go to admin.link1 state but somehow that is not working.
But if I remove the admin parent and use link1 only, it works fine.
Code: http://plnkr.co/edit/F7lw58esXz7rWzeo3ER6?p=preview
Preview: http://embed.plnkr.co/F7lw58esXz7rWzeo3ER6/preview
Any clue?
You were almost there, the updated plunker. There is only one change the nested views do have appended sign '@':
.state('admin.link1', {
url: '/admin/link1',
resolve: {
test: function() {
console.log('admin.link1 called resolve');
return;
}
},
views: {
// instead of this
// 'navigation': {
// we have to use absolute name with the @ at the end
'navigation@': {
template: '<div>admin navigation</div>'
},
// this is searched in parent view
// 'content': {
// this is targting the root
'content@': {
template: '<div>admin link1</div>'
}
}
})
The point is hidden in the absolut view naming, an extract:
Behind the scenes, every view gets assigned an absolute name that follows a scheme of
viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
The working example(s) here or other here
Please, try to read this answer, where I tried deeply describe what is the view naming about.(search for a last section: EXTEND: to give THE answer to a comment)
这篇关于子路由不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
