Angular UI路由器-带有参数的“无法解析状态”答案

【问题标题】：Angular UI Router - "could not resolve state" with parametersAngular UI路由器-带有参数的“无法解析状态”
【发布时间】：2015-08-19 14:15:29
【问题描述】：

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

我希望我正在做一些非常明显的事情，但事实证明这比我预期的要棘手！

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案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>

【讨论】：

感谢您的建议，@pankajparkar。我希望首先得到一个简单的例子。这很可能是我接下来要去的方向！
@amlyhamm upvote 将不胜感激谢谢 :)

【解决方案2】：

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 中查看它的示例。

【讨论】：

愚蠢的语法陷阱！这完美地工作。感谢您的完整解释。
请注意：您为 ui-sref 文档引用的链接不起作用。
@amlyhamm 刚刚进行了更新..现在它可以工作了..您还可以查看我的答案，其中有一些可以改进您的代码的额外内容..

【解决方案3】：

试试这个

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

【讨论】：