Angular UI Router - "could not resolve state" with parameters

Question

I am very simply trying to use the Angular UI router. I have just two states are the moment and they are crazy simple. Here's a bit of my app:

    .config(function($stateProvider, $urlRouterProvider){

        $stateProvider
            .state('items', {
                url: '/items',
                templateUrl: 'src/components/Items/list.html',
                controller: 'ItemsController'
            })
            .state('item-details', {
                url: '/item-details/:itemId',
                templateUrl: 'src/components/Items/details.html',
                controller: 'ItemDetailsController'
            });

        $urlRouterProvider.otherwise('/items');

    });

And a bit of my HTML:

<a ui-sref="item-details/{{item.id}}">{{ item.name }}</a>

When I type item-details/194 manually into my browser, things work like a charm. But, when I try to follow the link I've listed above, I get this error:

Error: Could not resolve 'item-details/194' from state 'items' at Object.y.transitionTo

I'm hoping I'm doing something pretty obvious, but this is proving to be trickier than I expected!

Pankaj Parkar · Accepted Answer · 2015-06-04 19:56:49Z

2

All above answers are correct

As an additional improvisation, it looks like item-details can actually become a child route of item

I'd suggest you to change your item-details route to item.details, this will say that details route has inherited from item state.

.state('item.details', {
      url: '/item-details/:itemId',
      templateUrl: 'src/components/Items/details.html',
      controller: 'ItemDetailsController'
});

Then your ui-sref will become.

<a ui-sref=".details({itemId: item.id})">{{ item.name }}</a>

answered Jun 4, 2015 at 19:56

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

amlyhamm Over a year ago

Thanks for the advice, @pankajparkar. I was hoping to just get a simple example working, first. This is likely the direction I will head next!

Pankaj Parkar · Accepted Answer · 2015-06-04 20:00:05Z

1

You've got the wrong syntax for your ui-sref directive. Instead of doing this:

<a ui-sref="item-details/{{item.id}}">{{ item.name }}</a>

You can pass parameters to the state like this:

<a ui-sref="item-details({itemId: item.id})">{{ item.name }}</a>

You can see an example of it in the documentation for ui-sref.

edited Jun 4, 2015 at 20:00

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Jun 4, 2015 at 19:50

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

3 Comments

amlyhamm Over a year ago

Silly syntax gotchas! This works perfectly. Thank you for the complete explanation.

amlyhamm Over a year ago

Just a quick note: the link you've referenced for ui-sref documentation does not work.

Pankaj Parkar Over a year ago

@amlyhamm just made an update..now it will be working..You could also look at mine answer which has some extras that would improve your code..

ArtemKh · Accepted Answer · 2015-06-04 19:50:01Z

1

Try this

<a ui-sref="item-details({ itemId: item.id })">{{ item.name }}</a>

answered Jun 4, 2015 at 19:50

ArtemKh

1,0007 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular UI Router - "could not resolve state" with parameters

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related