Угловой UI-маршрутизатор - «не удалось разрешить состояние» с параметрами

Question

Я очень просто пытаюсь использовать Угловой UI-маршрутизатор. У меня только два состояния - момент, и они сумасшедшие просто. Вот немного из моего приложения:

.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'); 

    }); 

И немного моего HTML:

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

Когда я печатаю item-details/194 вручную в браузере, все работает как шарм. Но, когда я пытаюсь следовать по ссылке я перечислил выше, я получаю эту ошибку:

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

Я надеюсь, что я делаю что-то довольно очевидное, но это оказывается сложнее, чем я ожидал!

Answer 1

Вы получили неправильный синтаксис для ui-sref директивы. Вместо того, чтобы сделать это:

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

Вы можете передать параметры состояния, как это:

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

Вы можете увидеть пример этого в documentation for ui-sref.

Answer 2

Попробуйте

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

Answer 3

Все вышеперечисленные ответы верны

В качестве дополнительной импровизация, это выглядит как item-details может фактически стать ребенком маршрут item

Я предлагаю вам изменить свой item-details маршрут item.details, это будет говорить что маршрут сведений унаследовал от item.

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

Тогда ваш ui-sref станет.

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