过渡更新网址从子到父状态UI路由器 [英] Updating url on transition from child to parent state in UI router
问题描述
我有一个角（1.2.1）的应用程序运行的UI路由器（0.2.13），下面的国家结构：
I have an Angular (1.2.1) app running UI-router (0.2.13), and the following state structure:
$stateProvider.state('home', {
template: "<div home></div>",
url: '/'
}).state('home.geo', {
url:'/geo/{geo}'
}
从过渡父到子或不同的 {地质} 参数值按预期工作子女之间。从孩子过渡到父母的工作 - 即模板的内容和预期$ state.current变化 - 但是URL不会在浏览器更新。
Transitioning from parent to child or between children with different {geo} parameter values works as expected. Transitioning from child to parent works - i.e. the contents of the template and $state.current change as expected - but the URL does not update in the browser.
需要明确的是，一个例子：我在 /地理/加利福尼亚键，我点击与 UI-SREF ='家'按钮。我已经确认了正确的的href ='＃/ 一直放在按钮，点击它会导致$状态转换回家乡，但 /地理/加利福尼亚留在我的地址栏。
To be clear, an example: I'm in /geo/california and I click a button with ui-sref='home'. I've confirmed that the correct href='#/' has been placed on the button, and clicking it causes the $state to transition back to the home state, but /geo/california remains in my address bar.
我缺少的是在这里吗？
What am I missing here?
更新在respose为@ UlukBiy的评论：没有，首页没有在其模板的用户界面视图。用户界面视图是在它的父模板：整体结构是：
Update in respose to @UlukBiy's comment: No, home does not have a ui-view in its template. The ui-view is in the template of it's parent: The overall structure is:
<body>
<div app-nav></div>
<div ui-view></div>
</body>
所以家里指令被插入到用户界面视图，但它包含本身没有UI的意见。那是我的问题吗？我是新来的用户界面的路由器，并承担有国家有关指令主场迎战的作用，一些低级的误解时，我张贴了这个。如果是的话，请帮我更正。
So the home directive gets inserted into the ui-view, but it contains no ui-views of its own. Is that my problem? I'm new to UI-router, and assumed there was some low-level misunderstanding about the role of states vs. directives when I posted this. If so, please help me correct it.
推荐答案
此情况下应该是工作。有工作的例子的（点击蓝色按钮右侧顶在单独的窗口中运行的例子，显示地址栏）的
This scenario should be working. There is a working example (click the blue button right-top to run example in separate window, showing the address bar)
我更新您的状态DEF了一下：
I updated your state def a bit:
$stateProvider
.state('home', {
url: "/",
template: 'Home view <hr /> Geo view: <div ui-view></div>',
})
.state('home.geo', {
url:'^/geo/{geo}',
templateUrl: 'tpl.html',
})
所有这些环节都按预期工作：
All these links do work as expected:
<a href="#/home">
<a href="#/geo/california">
<a href="#/geo/czechia">
<a ui-sref="home">
<a ui-sref="home.geo({geo:'california'})">
<a ui-sref="home.geo({geo:'czech'})">
所以，在这里最重要的变化是，对于一个孩子的状态，我们应该利用这个网址：
So, the most important change here is that for a child state we should use this url:
url:'^/geo/{geo}',
而不是网址：'/地理/ {}缘。检查DOC：
如果您想拥有绝对的URL匹配，那么你就需要preFIX您的网址字符串以特殊符号'^'。
If you want to have absolute url matching, then you need to prefix your url string with a special symbol
'^'.
检查工作的例子 rel=\"nofollow\">
Check the working example here
这篇关于过渡更新网址从子到父状态UI路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
