在 UI 路由器中更新 url 从子状态到父状态的转换

Question

我有一个 Angular (1.2.1) app 运行 UI-router (0.2.13)，以及以下状态结构：

$stateProvider.state('home', {
        template: "<div home></div>",
        url: '/'
    }).state('home.geo', { 
        url:'/geo/{geo}' 
}

从父级到子级或具有不同 {geo} 参数值的子级之间的转换按预期工作。从子项到父项的转换有效——即模板的内容和 $state.current 按预期更改——但 URL 不会在浏览器中更新。

为了清楚起见，举个例子：我在 /geo/california 中，然后单击带有 ui-sref='home' 的按钮。我已确认正确的 href='#/' 已放置在按钮上，单击它会导致 $state 转换回主状态，但 /geo/california 仍保留在我的地址栏中。

我在这里错过了什么？

Update 回应@UlukBiy 的评论：不，home 在其模板中没有 ui-视图。 ui-视图位于其父视图的模板中：整体结构为：

<body> 
   <div app-nav></div>
   <div ui-view></div>
</body>

因此 home 指令被插入到 ui-view 中，但它不包含自己的 ui-views。那是我的问题吗？我是 UI-router 的新手，并且假设在我发布此内容时对状态与指令的作用存在一些低级误解。如果是，请帮我改正。

Answer 1

这个场景应该有效。有a working example （点击右上角的蓝色按钮到运行例子在单独的window，显示地址栏）

我稍微更新了你的状态定义：

$stateProvider
  .state('home', {
      url: "/",
      template: 'Home view <hr /> Geo view: <div ui-view></div>',
  })
  .state('home.geo', {
      url:'^/geo/{geo}',
      templateUrl: 'tpl.html',
  })

所有这些链接都按预期工作：

<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'})">

所以，这里最重要的变化是对于子状态我们应该使用这个 url:

url:'^/geo/{geo}',

而不是 url:'/geo/{geo}'。检查文档：

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

检查工作示例here

在 UI 路由器中更新 url 从子状态到父状态的转换

Updating url on transition from child to parent state in UI router

angularjs

angular-ui-router

Absolute Routes (^)