AngularJS UI Router: ui-sref does not update the url in the address bar because the parent state has StateParams?

I am using Angular UI Router and seem to be experiencing a strange problem. When I click on the link to which the ui-sref directive is attached, it successfully loads the new view, as I would expect, HOWEVER, it does not update the URL bar. I believe this happens because the parent URL is a dynamic StateParam /:room. How do I solve this problem?

Here is a snippet of my user interface

// 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"
    }
  }
});

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

+4
source share
2 answers

I created a plunker to demonstrate what happens

, :

<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>

? -, :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>

, ( , prview sepearate URL-)

+3

, URL.

, , :

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

... URL-, :

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

sort orderby , .

0

All Articles