我正在尝试在我的应用程序中设计几个深度的路由和嵌套 View ，以便根据路由替换应用程序的部分内容。我能够加载登录页面，并且布局 View 似乎也加载了，但是，我似乎无法获取嵌套的 <ui-view />标签来工作。有人可以告诉我我是怎么做错的吗，或者 Angular 中是否有更惯用的方法来完成相同的功能。
app.js
(function() {
'use strict';
angular
.module('webApp', [
'ui.router',
])
.config(config)
.run(run);
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider, ngClipProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
abstract: true,
url: '/',
template: '<ui-view/>'
})
.state('app.login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl as login',
url: ''
})
.state('app.main', {
url: 'room',
templateUrl: 'views/layout.html'
})
.state('app.main.foo', {
url: '',
views: {
'<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7bfb2b6b3b2a597b6a7a7f9bab6beb9" rel="noreferrer noopener nofollow">[email protected]</a>': {
templateUrl: 'partials/header.html',
controller: 'HeaderCtrl as header'
},
'<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82f1ebe6e7e0e3f0c2e3f2f2acefe3ebec" rel="noreferrer noopener nofollow">[email protected]</a>': {
templateUrl: 'partials/sidebar.html',
controller: 'SidebarCtrl as sidebar'
},
'<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1aca0a8af81a0b1b1efaca0a8af" rel="noreferrer noopener nofollow">[email protected]</a>': {
templateUrl: 'partials/main.html',
controller: 'MainCtrl as main'
},
'subHeader': {
templateUrl: '<div><div ui-view="bottomHeader"></div></div>',
controller: 'SubHeaderCtrl',
controllerAs: 'subHeader'
},
'subSidebar': {
templateUrl: '<div><div ui-view="bottomSidebar"></div></div>',
controller: 'SubSidebarCtrl',
controllerAs: 'subSidebar'
},
'bottomHeader': {templateUrl: '<div>FOO</div>'},
'bottomSidebar': {templateUrl: '<div>BAR</div>'}
},
resolve: {
isAuthenticated: ['Auth', function(Auth) {
return Auth.isAuthenticated();
}]
}
})
.state('app.main.foo.bar', {
url: '/:id',
views: {
'main@': {
templateUrl: 'partials/main.html'
},
'mainOne@': {
templateUrl: 'partials/main-one.html',
controller: 'MainOneCtrl as mainOne'
},
'mainTwo@': {
templateUrl: 'partials/main-two.html',
controller: 'MainTwoCtrl as mainTwo'
},
'mainThreee@': {
templateUrl: 'partials/main-three.html',
controller: 'MainThreeCtrl as mainThree'
}
}
});
}
run.$inject = ['Auth'];
function run(Auth) {
Auth.stateChangeError();
Auth.loginSuccess();
Auth.loginFailure();
Auth.checkSession();
}
}());
index.html
<!DOCTYPE html>
<html lang="en" ng-app="webApp">
<head>
<title>FooBar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" />
<script src="/js/all.js"></script>
</head>
<body ui-view>
</body>
</html>
layout.html
<div ui-view="header"></div>
<div class="app">
<div class="getting-started">
</div>
<div ui-view="sidebar"></div>
<div ui-view="main"></div>
</div>
header.html
<header class="header">
<div ui-view="subHeader"></div>
<div class="trigger-button">
<button class="trigger">
<i class="icon-account"></i>
</button>
</div>
</header>
main.html
<div>
<div ui-view="mainOne"></div>
<div ui-view="mainTwo"></div>
<div ui-view="mainThree"></div>
</div>
sidebar.html
<div>
<div ui-view="subSidebar"></div>
</div>
最佳答案
有a working plunker ，显示您的场景
我对您的状态定义做了一些更改:
$stateProvider
.state('app', {
abstract: true,
url: '/',
template: '<ui-view/>'
})
.state('app.login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login',
url: ''
})
我们使用controller和controllerAs语法
.state('app.main', {
url: 'room',
templateUrl: 'views/layout.html'
})
没有绝对的命名，我们以父级为目标，相对的就足够了，更具可读性
.state('app.main.foo', {
url: '',
views: {
'header': {
templateUrl: 'partials/header.html',
controller: 'HeaderCtrl',
controllerAs: 'header',
},
'sidebar': {
templateUrl: 'partials/sidebar.html',
controller: 'SidebarCtrl',
controllerAs: 'sidebar',
},
'main': {
templateUrl: 'partials/main.html',
controller: 'MainCtrl',
controllerAs: 'main',
}
},
resolve: {
isAuthenticated: ['Auth', function(Auth) {
return Auth.isAuthenticated();
}]
}
})
主要状态在我们的父级中，不要重新定义它
.state('app.main.foo.bar', {
url: '/:id',
views: {
'mainOne': {
templateUrl: 'partials/main-one.html',
controller: 'MainOneCtrl',
controllerAs: 'mainOne',
},
'mainTwo': {
templateUrl: 'partials/main-two.html',
controller: 'MainTwoCtrl',
controllerAs: 'mainTwo',
},
'mainThreee': {
templateUrl: 'partials/main-three.html',
controller: 'MainThreeCtrl',
controllerAs: 'mainThree',
}
}
});
检查一下here
关于javascript - 如何加载嵌套 3 种状态深度的 UI-router ui-view 模板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29441976/