我正在尝试让我的嵌套状态正常工作,但我不知道我做错了什么。
Here is my simple example on plunkr
正文:
<div class="site_container" ui-view></div>
我想显示我的站点容器,它应该始终显示:
<header class="main_header">
<h1>My header</h1>
</header>
<main ui-view></main>
在 -tag 中我想在一些子状态之间切换,举个简单的例子我只想显示一个 :
<h2>My content</h2>
因此,我想要:
<div class="site_container" ui-view>
<header class="main_header">
<h1>My header</h1>
</header>
<main ui-view>
<h2>My content</h2>
</main>
</div>
这是我的配置:
angular.module('myApp').config([
'$stateProvider',
'$urlRouterProvider',
function (
$stateProvider,
$urlRouterProvider
) {
$stateProvider
.state('main', {
abstract: true,
url: '/',
templateUrl: 'app.html'
})
.state('main.child', {
url: '/child',
templateUrl: 'child.html',
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/child');
}]);
你能告诉我,我做错了什么吗?
最佳答案
由于您的 abstract
状态在 URL 中有 /
,这意味着当您创建子状态时,它可以有带有 /child
的 URL将被视为//child
根据您当前的代码,它应该是 $urlRouterProvider.otherwise('//child');
但从技术上讲,为了使 URL 对用户友好,您应该使用空白 (''
) URL 声明抽象状态
.state('main', {
abstract: true,
url: '', //<--changed to blank URL
templateUrl: 'app.html'
})
然后你可以让你的代码像你发布的问题一样工作
关于javascript - Angular UI-Router 和嵌套状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32027840/