AngularJS一页有多个状态

时间:2016-08-02 11:51:35

标签: javascript angularjs angular-ui-router

我正在使用angular-ui-router开发angularjs应用程序。有一个列出项目的页面,这些项目可按名称过滤,并在网址中显示 / 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是未定义的,我不明白为什么。

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

1 个答案:

答案 0 :(得分:2)

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