PI.*_*PI. 11 angularjs angular-ui-router
我想要有多个布局(1-col,2-col,3-col),我想根据所需的布局切换出不同的路径.
我目前有一个root状态默认使用某个布局,然后在该布局中包含用于页眉,页脚,侧边栏等部分的命名ui-view指令.
我只是想知道是否有可能更改嵌套状态的布局,因为它当前不起作用并且控制台或linter中没有错误出现.
我目前在浏览器中没有输出,这让我觉得我已经实现了错误的方法,因为所有路由都不是从路由状态继承的.
这是代码:
我-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 -->
<script src="scripts/config.js"></script>
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/my-module.js"></script>
<!-- inject:partials -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
1-column.html
<div class="one-column">
<!-- page header -->
<div ui-view="header">
</div>
<!-- / page header -->
<!-- state breadcrumb (optional) -->
<div ui-view="step-breadcrumb">
</div>
<!-- / state breadcrumb -->
<!-- page-container -->
<div class="page-container">
<!-- main content -->
<div ui-view="main-content">
</div>
<!-- / main content -->
</div>
<!-- / page-container -->
<!-- page footer -->
<div ui-view="footer">
</div>
<!-- / page footer -->
</div>
感谢帮助
Rad*_*ler 20
虽然没有plunker显示您的示例,但我将与您分享一个:工作布局示例.请观察它,看看我将在这里解释的内容
如果我们的root状态应该是注入的唯一根状态index.html,我们需要一些不同的定义:
所以对于index.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.item.您还可以选择以绝对语法编写视图名称.
其他州定义也是如此.因为'root.signup'具有直接父"root",所以现有语法将起作用
.state('root.signup', {
url: '/signup',
views: {
'step-breadcrumb': { // working AS IS
...
但是我们可以使用绝对命名,它也会起作用
.state('root.signup', {
url: '/signup',
views: {
'step-breadcrumb@root': { // absolute naming
...
因为无论如何这都是它的作用.
请查看布局示例以获取更多详细信息
| 归档时间： |
|
| 查看次数： |
15048 次 |
| 最近记录： |