AngularJS UI Router: ui-sref not updating URL in address bar because parent state has StateParams?

Question

I am using Angular UI Router and seem to be experiencing an odd issue. When I click a link that has a ui-sref directive attached to it, it successfully loads the new view as I would expect, HOWEVER, it does not update the URL bar. I believe this is ocurring because the parent state's url is a dynamic StateParam /:room. How do I get around this issue?

Here is a snippet of my UI Router

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

Radim Köhler · Accepted Answer · 2014-08-15 08:49:39Z

I created a plunker to demonstrate what is happening

So we can navigate among rooms like this:

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

this will in fact creat the url like this

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

Now, we can navigate to the substate .share without specifying the :room id

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

And what will happen? Firstly the place for :room will be empty ... no room is selected.

Secondly - the previously selected room (its :room id) won't be changed. So the resulting URL will depend on the already selected room. If we were in a room 2, the generated url will be:

#//share

but we will be redirected to

#/2/share

becuase there is still $stateParams.room === 2

Finally, we should always pass the complete state signature:

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

Check that all here (click the top right corner blue icon to open the prview in sepearate window with url)

Ben · Accepted Answer · 2015-08-31 20:26:48Z

0

I had this problem because my parameter names did not match my URL definition.

For example, I had a parameter set like this:

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

...and a URL like this:

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

After fixing the mismatch between sort and orderby, the address bar updated as expected.

answered Aug 31, 2015 at 20:26

Ben

57.6k50 gold badges187 silver badges229 bronze badges

Collectives™ on Stack Overflow

AngularJS UI Router: ui-sref not updating URL in address bar because parent state has StateParams?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related