ui 路由器不会将内容放在命名的 ui-view 中 [英] ui router does not put the content in the named ui-view
问题描述
当我进入路线时
#projects100dates2014-01-01
在 url 中按回车，我得到项目"状态.
in the url and press return I get the "projects" state.
我预计会触发projects.selected.dates"状态.
I expected to trigger "projects.selected.dates" state.
为什么路由不起作用?实际上它在我的机器上本地工作，没有命名视图......
Why does the routing not work? Actually it works locally on my machine without named view...
http://plnkr.co/edit/0DJ6W7QEPx2UzpdzDrVu?p=preview
'use strict';
angular
.module('projectplanner', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/projects');
$stateProvider
.state('projects', {
url: '/projects',
views: {
'menu': {
template: 'Start your projects!'
},
'content': {
templateUrl: "projects.html",
controller: 'ProjectsController'
}
}
})
.state('projects.selected', {
url: '/:projectId'
})
.state('projects.selected.dates', {
url: '/dates/:date',
views: {
'menu': {
templateUrl: 'menu.html'
},
'content': {
templateUrl: 'dateplanner.html',
controller: 'DateplannerController'
}
}
})
});
<!DOCTYPE html>
<html ng-app="projectplanner">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
<script data-require="ui-router@*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="ProjectsController.js"></script>
<script src="DateplannerController.js"></script>
</head>
<body>
<div class="wrapper" >
<header class="aside">Logo</header>
<div ui-view="menu" id="menu" class="aside"></div>
<div ui-view="content" class="main">
</div>
</div>
</body>
</html>
推荐答案
有更新和工作 plunker，这是必不可少的更新:
There is the updated and working plunker, and this is the essential update:
.state('projects.selected.dates', {
url: '/dates/:date',
views: {
'menu@': { // HERE is @ added
templateUrl: 'menu.html'
},
'content@': { // HERE is @ added
templateUrl: 'dateplanner.html',
controller: 'DateplannerController'
}
}
})
查看 ui-view 名称末尾的 '@'
完整的解释在这里:
- 查看名称 - 相对名称与绝对名称 (引用)
在幕后，每个视图都被分配了一个遵循 viewname@statename 方案的绝对名称，其中 viewname 是视图指令中使用的名称和状态名称是状态的绝对名称，例如联系方式.项目.您还可以选择以绝对语法编写视图名称.
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.
所以，我所做的是使用 绝对名称 .. 定位根目录 - index.html
So, what I did is use of the absolute name .. targeting the root - index.html
文档中的一些示例...很好地解释了所有这些:
Some examples from documentation... greatly explaining that all:
$stateProvider
.state('contacts', {
// This will get automatically plugged into the unnamed ui-view
// of the parent state template. Since this is a top level state,
// its parent state template is index.html.
templateUrl: 'contacts.html'
})
.state('contacts.detail', {
views: {
////////////////////////////////////
// Relative Targeting //
// Targets parent state ui-view's //
////////////////////////////////////
// Relatively targets the 'detail' view in this state's parent state, 'contacts'.
// <div ui-view='detail'/> within contacts.html
"detail" : { },
// Relatively targets the unnamed view in this state's parent state, 'contacts'.
// <div ui-view/> within contacts.html
"" : { },
///////////////////////////////////////////////////////
// Absolute Targeting using '@' //
// Targets any view within this state or an ancestor //
///////////////////////////////////////////////////////
// Absolutely targets the 'info' view in this state, 'contacts.detail'.
// <div ui-view='info'/> within contacts.detail.html
"info@contacts.detail" : { }
// Absolutely targets the 'detail' view in the 'contacts' state.
// <div ui-view='detail'/> within contacts.html
"detail@contacts" : { }
// Absolutely targets the unnamed view in parent 'contacts' state.
// <div ui-view/> within contacts.html
"@contacts" : { }
这篇关于ui 路由器不会将内容放在命名的 ui-view 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
