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](http://stackoverflow.com/questions/14765719/how-to-watch-for-a-route-change-in-angularjs) post solved it. I think you need to watch `$routeUpdate`. Hope this helps! — Pete, Jul 16 '14 at 17:13

score 2 · Accepted Answer · answered Jul 17 '14 at 05:58

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)

Sometimes you're just a character away... All makes sense now, thanks. — RoryKoehein, Jul 17 '14 at 08:40

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

1 Answers1