AngularJS 一页有多种状态

Question

我正在使用 angular-ui-router 开发一个 angularjs 应用程序。有一个页面列出了项目，可以按名称过滤，它显示在 /items?name=foo 之类的 url 中。还有一个页面，例如用户，您可以从该页面导航到项目页面，这些页面由用户过滤，例如 /items?userid=bar。

我通过在路由器配置中为同一页面设置两种状态来做到这一点：

.state('index.items', {
   url: '/items?:name',
   controller: 'ItemCtrl as ctrl',
   templateUrl: 'item/index.html',
   brParent: 'index.home'
})
.state('index.itemsOfUser', {
   url: '/items?:userid&:name',
   controller: 'ItemCtrl as ctrl',
   templateUrl: 'item/index.html',
   brParent: 'index.home'
})

我这样做是为了点击导航栏上的项目页面会转到未经过用户过滤的普通项目页面。

但是当从用户导航到项目页面时，用户 ID 出现在 url 中但在 $stateparams 用户 ID 未定义，我不明白为什么。

我不知道我的方法是否正确，我是 angular 新手。

Answer 1

ui-router 启用查询字符串参数的检索。您的代码几乎是正确的，只是一个小的语法修复：

.state('index.items', {
   url: '/items?name', // Remove semicolon
   controller: 'ItemCtrl as ctrl',
   templateUrl: 'item/index.html',
   brParent: 'index.home'
})
.state('index.itemsOfUser', {
   url: '/items?userid&name', // Remove semicolons
   controller: 'ItemCtrl as ctrl',
   templateUrl: 'item/index.html',
   brParent: 'index.home'
})

如文档中所述：https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters