Question

我非常只是尝试使用Angular 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

以上所有答案都是正确的

作为额外的即兴创作，看起来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>

Answer 2

试试这个

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

Answer 3

您的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中找到它的示例。

Angular UI Router - 使用参数“无法解析状态”

3 个答案: