Angular UI路由器 – 具有多个布局的嵌套状态
我想有多个布局（1-col，2-col，3-col），我想根据所需的布局为不同的路线转换。
我目前有一个默认使用特定布局的根状态，然后在该布局中包含名称，如页眉，页脚，边栏等部分的命名ui-view指令。
我只是想知道是否可以改变嵌套状态的布局，因为它目前不工作，并没有出现控制台或linter内的错误。
我目前在浏览器中没有任何输出，这使得我认为我已经实现了错误的方法，因为所有的路由都不是从路由状态inheritance的。
代码如下：
我-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>
感谢帮助
虽然没有显示你的例子，但我会与你分享一个工作布局的例子 。 请观察它在行动中看到我将在这里解释
如果我们的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是view指令中使用的名称，state名称是state的绝对名称，例如contact.item。 您也可以select以绝对语法编写视图名称。
其他州的定义也是如此。 由于'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 ...
因为这是它背后的原理。
请观察布局示例以获取更多详细信息
