角UI路由器-具有多個布局的嵌套狀態(tài)我想有多個布局(1，2，3)，我想切換到不同的路線，根據(jù)需要的布局。我目前有一個根狀態(tài)，默認(rèn)使用某個布局，然后在該布局中包含針對頁眉、頁腳、側(cè)邊欄等部分的命名UI視圖指令。我只是想知道是否有可能更改嵌套狀態(tài)的布局，因為它目前無法工作，控制臺或Linter中也沒有出現(xiàn)錯誤。我目前在瀏覽器中根本沒有輸出，這使我認(rèn)為我實現(xiàn)了錯誤的方法，因為所有的路由都不是從路由狀態(tài)繼承的。下面是代碼：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貢獻(xiàn)1895條經(jīng)驗 獲得超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'
視圖名稱-相對名稱與絕對名稱 (下面是小引文)和 我試著詳細(xì)說明
在幕后，每個視圖都分配了一個絕對名稱，該名稱遵循 'viewname@statename'，其中viewname是視圖指令中使用的名稱，狀態(tài)名稱是狀態(tài)的絕對名稱，例如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 關(guān)注
- 416 瀏覽
添加回答
舉報
0/150
提交
取消