AngularJS UI路由器:ui-sref没有更新地址栏中的URL,因为父状态有StateParams?

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

这是我的UI路由器的片段

// 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”>分享< / button>

最佳答案
我创建了一个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>

实际上,这将创建这样的URL

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

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

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

会发生什么?首先,房间将是空的……没有选择房间.

其次 – 以前选择的房间(房间ID)不会改变.因此,生成的URL将取决于已选择的房间.如果我们在2号房间,生成的网址将是:

#//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)

转载注明原文:AngularJS UI路由器:ui-sref没有更新地址栏中的URL,因为父状态有StateParams? - 代码日志