AngularJS UI路由器：ui-sref没有更新地址栏中的URL，因为父状态有StateParams？答案

【问题标题】：AngularJS UI Router: ui-sref not updating URL in address bar because parent state has StateParams?AngularJS UI路由器：ui-sref没有更新地址栏中的URL，因为父状态有StateParams？
【发布时间】：2014-08-15 03:10:32
【问题描述】：

我正在使用 Angular UI 路由器，但似乎遇到了一个奇怪的问题。当我单击附加了 ui-sref 指令的链接时，它会按我的预期成功加载新视图，但是，它不会更新 URL 栏。我相信这是发生的，因为父状态的 url 是动态 StateParam /:room。我该如何解决这个问题？

这是我的 UI 路由器的 sn-p

// Room
.state({
  name: 'room',
  url: "/:room",
  views: {
    "main": {
      templateUrl: "views/pages/chat.html",
      controller: "RoomCtrl"
    },
    "login@room": {
      templateUrl: "views/partials/_login.html"
    },
    "navigation@room": {
      templateUrl: "views/partials/_navigation.html",
      controller: "NavigationCtrl"
    }
  },
  resolve: {
    userLocation: function(geolocationFactory) {
      return geolocationFactory;
    }
  }
})

// Share
.state({
  name: 'room.share',
  url: "/share",
  views: {
    "share@room": {
      templateUrl: "views/partials/_share.html",
      controller: "ShareCtrl"
    }
  }
});

ui-sref
<button id="share-button" ui-sref="room.share">Share</button>

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

我创建了一个plunker 来演示正在发生的事情

所以我们可以像这样在房间之间导航：

<a ui-sref="room({room:1})">room 1</a>
<a ui-sref="room({room:2})">room 2</a>
<a ui-sref="room({room:3})">room 3</a>

这实际上会创建这样的网址

#/1      // where 1 represents the id of the :room
#/2      
#/3

现在，我们可以导航到子状态 .share 而无需指定 :room id

<a ui-sref="room.share">room.share</a>

然后会发生什么？首先:room 的位置将是空的......没有选择房间。

其次 - 之前选择的房间 （其 :room id） 不会改变。因此，生成的 URL 将取决于已选择的房间。如果我们在 2 号房间，生成的 url 将是：

#//share

但我们将被重定向到

#/2/share

因为还有 $stateParams.room === 2

最后，我们应该始终传递完整的状态签名：

<a ui-sref="room.share({room:1})">room.share({room:1})</a>
<a ui-sref="room.share({room:2})">room.share({room:2})</a>
<a ui-sref="room.share({room:3})">room.share({room:3})</a>

检查所有here（单击右上角的蓝色图标以在带有url的单独窗口中打开prview）

【讨论】：

【解决方案2】：

我遇到了这个问题，因为我的参数名称与我的 URL 定义不匹配。

例如，我有一个这样的参数集：

{
    page: {...},
    results: {...},
    sort: {...},
}

...和这样的 URL：

url: '/foo?page&results&orderby'

修复sort和orderby之间的不匹配后，地址栏按预期更新。

【讨论】：