AngularJS UI Router linking to a State with URL Parameters inbetween the state

Question

I've got some state routing like:

.state. ('home', { ... })

.state('home.company', {
    url: 'company/{ID:int}',
    abstract: true,
    template: '<ui-view/>'
})

.state('home.company.list', {
    url: '/list',
    views: { ... }

I want to use something like this:

ui-sref="home.company({ ID: id }).list"

to navigate to the state. But it doesn't work. I also tried to do following:

ui-sref="home.company.list({ ID: id })"

This also doesn't work. Any tips how to get it working?

P.S. It would work if I have used:

$state.go(route, { ID: id });

Where state would be 'home.company.list'. But it isn't what I currently want to achieve.

P.P.S Here is the error I get:

Error: Invalid state ref 'home.company({ ID: id }).list>

Radim Köhler · Accepted Answer · 2015-10-15 19:22:39Z

2

There is a working plunker

The above states seems to be ok. I just adjusted them a bit and it is working.

added url def for home state
converted <ui-view /> to more common and supported <div ui-view=""></div>

Here is the snippet

$stateProvider
  .state('home', {
      template: '<div ui-view=""></div>',
      url: "/home"

  })
  .state('home.company', {
      url: 'company/{ID:int}',
      abstract: true,
      template: '<div ui-view=""></div>',
  })

  .state('home.company.list', {
      url: '/list',
      views: {
        '': {
          templateUrl: 'tpl.html',
        }
      }
  })

These are links which do what is expected

<a ui-sref="home.company.list({ ID: 1 })">
<a ui-sref="home.company.list({ ID: 22 })">

Check it here

edited Oct 15, 2015 at 19:22

answered Oct 15, 2015 at 19:06

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

4 Comments

N.Zukowski Over a year ago

Thanks for your responce, but your solution unfortunately doesn't work for me. I tried the link in Comodo Dragon, IE and the newest Mozilla.

Radim Köhler Over a year ago

Ok, I should "fix" all the issue and make them standard... as I did that now. Check my extended answer, and updated plunker. It should now work for you in any browser (tested IE, Chrome...)

N.Zukowski Over a year ago

Now it works correctly. Thanks. I mark your post as the answer asap.

Radim Köhler Over a year ago

Great if that helped anyhow ;) Enjoy mighty UI-Router, sir!

Collectives™ on Stack Overflow

AngularJS UI Router linking to a State with URL Parameters inbetween the state

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related