Question

我正在使用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">Share</button>

Answer 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号房间，生成的网址将是：

#//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 （点击右上角的蓝色图标，在带有网址的分隔窗口中打开prview）

Answer 2

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

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

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

...以及这样的网址：

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

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

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

2 个答案: