使用 ui-router 和参数

Question

我有一个名为 products 的页面，有一个我使用 ng-repeat 列出的产品列表。对于每个产品，它们每个都有一个<a> 标记用于链接。我希望每个链接都将用户发送到products/item?productid=xxx，其中 xxx 代表每个特定项目的 ID。

使用 ui-router，如何使用<a> 向products/item 发送 GET 参数以及如何使用 ui-router 检测 GET 参数并加载项目的数据（例如名称、描述) 进入项目的页面控制器。

我已经阅读了https://github.com/angular-ui/ui-router/wiki/URL-Routing 所以如果我设置了

$stateProvider
.state('products.item', {
    url: "/products/:productid",
    templateUrl: 'products.item.html',
    controller: function ($stateParams) {
        // If we got here from a url of /contacts/42
        expect($stateParams).toBe({contactId: "42"});
    }
})

我应该将expect($stateParams).toBe({contactId: "42"}); 设置为什么？

我是用 PHP 做的。在 PHP 中，我必须将 <a> 更改为 <button> 并触发表单提交。然后使用 $_GET，我将调用另一个带有参数的 PHP 脚本并解析 JSON 响应。但是，我想将其更改为单个页面，这样就不会重新加载整页。

Answer 1

您的属性名称错误。它需要与您在状态定义对象的url 属性中定义的值相匹配。所以如果你有

 url: "/products/:productid",

在您的状态下定义，然后如果您转到“products/42”，您应该能够使用 $stateParams 访问该值。

expect($stateParams).toBe({productid: "42"});