Nested States and Query Parameters

Question

In my app, I'd like to have a separate view/controller for a child state with just a query param. Something along the lines of

.state('article') {
    url: '/articles/:articleID',
    controller: 'articleController'
}
.state('article.raw') {
    url: '?raw',
    controller: 'rawArticleController'
}

This works fine with the latest version of UI-Router, except that the query param ?raw doesn't show up in the URI. E.g, if I go to the article.raw state with {articleID: 'Hello'}, I still see this

http://app/articles/Hello

Instead of this

http://app/articles/Hello?raw

I've searched around and found these related issues but they don't solve my problem. Any insight would be greatly appreciated!

try to add url: .state('article.raw') { url: 'articalraw?raw' controller: 'rawArticleController' } and check — Gayathri Mohan, Jun 09 '16 at 02:32
Hmm, doing that would change the value of `articleID` wouldn't it? So `/articles/Hello` be `/articles/Helloarticalraw?raw` in the child state :/ — afreeorange, Jun 09 '16 at 02:52
just simple one add infront / like this .state('article.raw') { url: '/articalraw?raw' controller: 'rawArticleController' — Gayathri Mohan, Jun 09 '16 at 02:59

score 1 · Answer 1 · answered Jun 09 '16 at 05:20

There is a working plunker

In general, it is very hard for UI-Router to understand url definition without a constant in it (i.e. just with a query string param)

So, we should either use some specific name

url: "/child?raw"

or at least "/"

     .state('article', {
        url: '/articles/:articleID',
        controller: 'articleController',
        templateUrl: "views/article.html",
      })
    .state('article.raw', {
        url: '/?raw',
        controller: 'rawArticleController',
        templateUrl: "views/raw.html",
    })

Now all these links will work

  <a ui-sref="article">
  <a ui-sref="article.raw">
  <a ui-sref="article({articleID: 1})">
  <a ui-sref="article({articleID: 22})">
  <a ui-sref="article.raw({articleID: 333, raw: 'someRaw'})">
  <a ui-sref="article.raw({articleID: 4444, raw: 'otherRaw'})">

  <a href="#/article">
  <a href="#/articles/1234">
  <a href="#/articles/1/?raw='yyy'">
  <a href="#/articles/22/?raw=zzz">

Check it here

Thank you! Yeah, that's what I figured. I've [simply resorted to `url: '/raw` for the `article.raw`](https://github.com/afreeorange/bock/blob/master/bock/ui/src/scripts/Bock.routes.js#L94). Thing is, I had forward slashes in the `articleID` (should've called it `articleTitle`, sorry) which leads to [another set of issues entirely](https://github.com/afreeorange/bock#ui-router). — afreeorange, Jun 09 '16 at 17:20

score 0 · Answer 2 · answered Jun 09 '16 at 03:00

0

just simple one add infront / like this (/articalraw?raw)

.state('article.raw') { url: '/articalraw?raw' controller: 'rawArticleController'}

HAppy Coding

answered Jun 09 '16 at 03:00

Gayathri Mohan

2,924
4
19
25

Well, even if you did that, it will still 'swallow' the `?raw` part. I also have slashes in my route (i.e. in `articleID`). – afreeorange Jun 09 '16 at 03:16

Nested States and Query Parameters

2 Answers2