孩子的路线不触发 [英] 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('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>'
}
}
});
});
的HTML将导航和内容 用户界面视图它
<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>
我要点击链接1 并转到 admin.link1 状态，但不知何故，这是行不通的。
I want to click on link1 and go to admin.link1 state but somehow that is not working.
但是，如果我删除管理父，并使用链接1 而已，它工作正常。
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/$p $ PVIEW
任何线索？
推荐答案
您几乎在那里，更新的 plunker 。世界上只有一个变化嵌套观点确实有附加标志的'@'
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>'
}
}
})
问题的关键是隐藏在<一个href=\"https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names\"相对=nofollow>绝对视图命名，摘录：
在幕后，每一个观点被分配遵循的方案绝对名称 视图名@ Statename的 ，其中视图名是所使用的名称view指令和国家名称是国家的绝对名称，例如： contact.item。您也可以选择在绝对语法来写你的视图名称。
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屋！
