CODEWITHSUNDEEP
angularjsangular-ui-routerangular-uistate
afreeorange
afreeorange

Reputation: 21

Nested States and Query Parameters

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!

Upvotes: 2

Views: 901

Answers (2)

Radim Köhler
Radim Köhler

Reputation: 123861

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

Upvotes: 1

Gayathri Mohan
Gayathri Mohan

Reputation: 2962

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

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

HAppy Coding

Upvotes: 0

Related Questions