我正在使用 Angular-UI-Router 开发一个 AngularJS 应用程序。有一个列出项目的页面,可以按名称进行过滤,并且它显示在 url 中,例如 /items?name=foo。还有其他页面,例如用户,您可以从中导航到项目页面,并且这些页面会按用户进行过滤,例如 /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'
})
我这样做是为了单击导航栏上的项目页面进入正常的项目页面,而不是用户过滤的页面。
但是当从用户导航到项目页面时,userid 出现在 url 中,但在 $stateparams 中 userid 未定义,我不明白为什么。
我不知道我的方法是否正确,我是 Angular 新手。
最佳答案
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
关于javascript - AngularJS 一页具有多种状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38719693/