angular ui-router 父 url 设置为/ [英] angular ui-router parent url set to /
问题描述
使用 ui-router 并将父状态 url 设置为 /
导致我的 url 在查看子页面时看起来像 localhost:8000/#//child
.我只想要一个 /
散列和孩子之间.
Using ui-router and setting the parent state url to /
results in my url looking like localhost:8000/#//child
when looking at a child page. I'd like just a single /
between the hash and child.
我尝试将父状态 url 留空,但是当使用锚链接时,ui-sref 不会链接回父状态.有人有根级别未命名的父 url 的解决方案吗?
I tried leaving the parent state url blank, but then ui-sref won't link back to the parent state when using an anchor link. Anybody got a solution for having a root level un-named parent url?
app.config
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.我们将使用的功能称为:绝对路由 (^)一个>
The ui-router
has solution (almost) for anything. There is a working plunker. The feature we will se in action is called: Absolute Routes (^)
所以,让我们从要求开始,要有这些 URL 路由:
So, let's start with requirement, to have these URL routes:
domain/#/ -- root for main
domain/#/emergency/ -- main.emergency
domain/#/emergency/detail -- main.emergency.detail
使用这个 ui-sref
状态调用时应该可以工作:
Which should be working when using this ui-sref
state calls:
<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>
现在,诀窍是:
- root (first) 状态必须使用
url: "/"
,才能有一些唯一的标识 - 但是下一个状态可以再次从根开始它的定义:使用这个设置:
网址:^/..."
- the root (first) state must use
url: "/"
, to have some unique identification - but the next state can start its definition from the root again: with this setting:
url: "^/..."
这里是状态配置,启用想要的结果
Here is the state configuration, enabling the desired results
$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',
});
这里是文档:
...以及正在运行的 plunker...
这篇关于angular ui-router 父 url 设置为/的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!