我正在使用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)
