Angular UI Router doesn't get query params on url change

Question

I've got a collection page with a navigation on the left and a bunch of records on the right. Each navigation item corresponds to a record. I want the user to be able to click a nav item on the left and then scroll to the record. Plus the nav item and record should have a 'selected' state.

The URL /stuff/4?selectedRecord=5 should get me all the records of collection id 4 and select record nummer 5.

I got this working with ui-sref on my nav/record items, and the state provider below. When I click on a nav item, the url and states change.

But when I change the url from /stuff/4?selectedRecord=5 to /stuff/4?selectedRecord=6, nothing happens. No $stateChangeStart is fired...

$stateProvider

    // The stuff index: /stuff
    .state('stuff', {
        url: '/stuff',
        abstract : true,
        templateUrl: 'app/stuff/stuff.html' // wrapper
    })

    // Stuff detail page.
    .state('stuff.detail', {
        url: '/{stuffId}',
        templateUrl: 'app/stuff/stuff.detail.html',
        controller: 'StuffDetailController'
    })

    // Stuff detail page with a record selected
    .state('stuff.detail.selectedRecord', {
        url: '?selectedRecord'
    })

This is my sref nav item, which works:

<li ui-sref="stuff.detail.selectedRecord({selectedRecord:record.id})"
        ui-sref-active="selected">Works</li>

Edit: The exact same code works if I change the url of the selectedRecord to:

url: '/select/:selectedRecord'

I ran into this exact problem as well. This post solved it. I think you need to watch $routeUpdate. Hope this helps! — Pete
– Pete, Commented Jul 16, 2014 at 17:13

Radim Köhler · Accepted Answer · 2014-07-17 05:58:59Z

2

The issue here is, that the url (url: '?selectedRecord') defined with question mark at the beginning is the weakest choice for regex... so, if you could have the url e.g. like this:

- /stuff/4/?selectedRecord=5  // see the '/' before '?'
- /stuff/4/?selectedRecord=6

all will work. In fact, there could be anything, just to help to distinguish that the previous url part ( url: '/{stuffId}') has been already evaluated.

In this plunker, this updated url defintion:

.state('stuff.detail.selectedRecord', {
        url: '/?selectedRecord', // the ? is preceeding with /
        ...
    })

there could be in fact any other char or combination... just to help to find where the sub state url does start. (could play around here)

answered Jul 17, 2014 at 5:58

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RoryKoehein Over a year ago

Sometimes you're just a character away... All makes sense now, thanks.

Radim Köhler Over a year ago

Great to see that, enjoy ui-router ;) great tool ;)

Collectives™ on Stack Overflow

Angular UI Router doesn't get query params on url change

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related