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!

Answer 1

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>

Answer 2

尝试这个

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

Answer 3

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 .