使用 ui-router 并将父状态 url 设置为 /
结果我的网址看起来像 localhost:8000/#//child
在查看子页面时。我只想要一个 /
在哈希和 child 之间。
我尝试将父状态 url 留空,但是使用 anchor 链接时 ui-sref 不会链接回父状态。任何人都有一个解决方案来解决根级别未命名的父 URL?
应用程序配置
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("main", {
url: "/",
templateUrl: 'sites/main/main.html',
controller : 'MainController',
resolve: {
items: function(srvMenu) {
return srvMenu.getNav();
}
}
})
});
child.config
emergency.config(function($stateProvider) {
$stateProvider
.state("main.emergency", {
url: "/emergency",
templateUrl: 'sites/emergency/emergency_menu.html',
controller : 'EmenuController',
resolve: {
emenu: function(srvEmergency) {
return srvEmergency.getMenu();
}
}
})
.state("main.emergency.detail", {
url: "/detail",
templateUrl: 'sites/emergency/emergency_detail.html',
})
});
最佳答案
ui-router
(几乎)对任何事情都有解决方案。有一个工作plunker .我们将实际使用的功能称为:Absolute Routes (^)
所以,让我们从需求开始,拥有这些 URL 路由:
domain/#/ -- root for main
domain/#/emergency/ -- main.emergency
domain/#/emergency/detail -- main.emergency.detail
使用此
ui-sref
时应该可以工作国家呼吁:<ul>
<li><a ui-sref="main">Main</a></li>
<li><a ui-sref="main.emergency">Emergency</a></li>
<li><a ui-sref="main.emergency.detail">Detail</a></li>
</ul>
现在,诀窍是:
url: "/"
, 有一些唯一的标识url: "^/..."
这是状态配置,启用所需的结果
$stateProvider
// root with '/'
.state("main", {
url: "/",
templateUrl: 'main.tpl.html',
})
// here we start again from the root '/emergency'
.state("main.emergency", {
url: "^/emergency",
templateUrl: 'emergency_menu.tpl.html',
})
// parent and child '/emergency/detail
.state("main.emergency.detail", {
url: "/detail",
templateUrl: 'emergency_detail.tpl.html',
});
这是文档:
Absolute Routes (^)
...和工作 plunker ...
关于angularjs - Angular ui-router 父 url 设置为/,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23771229/