角UI路由器-具有多个布局的嵌套状态我想有多个布局(1，2，3)，我想切换到不同的路线，根据需要的布局。我目前有一个根状态，默认使用某个布局，然后在该布局中包含针对页眉、页脚、侧边栏等部分的命名UI视图指令。我只是想知道是否有可能更改嵌套状态的布局，因为它目前无法工作，控制台或Linter中也没有出现错误。我目前在浏览器中根本没有输出，这使我认为我实现了错误的方法，因为所有的路由都不是从路由状态继承的。下面是代码：my-module.js'use strict';angular.module('my-module', ['ngResource', 'ui.router'])
// Routing for the app.
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider .state('root', {
url: '',
views: {
'layout': {
templateUrl: 'partials/layout/1-column.html'
},
'header': {
templateUrl: 'partials/layout/sections/header.html'
},
'footer': {
templateUrl: 'partials/layout/sections/footer.html'
}
}
})
.state('root.home', {
url: '/'
})
.state('root.signup', {
url: '/signup',
views: {
'step-breadcrumb': {
templateUrl: 'partials/signup/step-breadcrumb.html'
}
}
})
;
$urlRouterProvider.otherwise('/');
})
;index.html<!doctype html><html class="no-js" ng-app="my-module">
<head>
<meta charset="utf-8">
<title>My Test App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<div ui-view="layout">
</div>
<!-- build:js({app,.tmp}) scripts/vendor.js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->感谢你的帮助
1 回答
蛊毒传说
TA贡献1895条经验 获得超3个赞
rootindex.html
// index.html<body> <div ui-view="layout"> </div></body>
$stateProvider .state('root', {
url: '',
views: {
'layout': {
templateUrl: 'partials/layout/1-column.html'
},
'header@root': {
templateUrl: 'partials/layout/sections/header.html'
},
'footer@root': {
templateUrl: 'partials/layout/sections/footer.html'
}
}
})'header@root'
视图名称-相对名称与绝对名称 (下面是小引文)和 我试着详细说明
在幕后，每个视图都分配了一个绝对名称，该名称遵循 'viewname@statename'，其中viewname是视图指令中使用的名称，状态名称是状态的绝对名称，例如contact.tem。您还可以选择用绝对语法编写视图名称。
.state('root.signup', {
url: '/signup',
views: {
'step-breadcrumb': { // working AS IS
....state('root.signup', {
url: '/signup',
views: {
'step-breadcrumb@root': { // absolute naming
...- 1 回答
- 0 关注
- 389 浏览
添加回答
举报
0/150
提交
取消