Question

我正在使用查询系统，允许用户从动态字段列表构建查询，我想在URL中持久查询。

通常我会这样做：

$stateProvider.state('alerts', {
                url: '/alerts/list?p1&p2&p3'
            })

在控制器中我可以用$ stateParam读取参数：

console.log($stateParams.p1)

我可以通过以下方式保存网址中的查询：

$state.go($state.current, {p1:'1', p2: '2'}, {location: true, inherit:true, notify:false})

但问题是我无法宣布所有参数。

我想这样做：

$state.go($state.current, {p1:'1', p2: '2', p3:'3', p4: '4', p5:'5'}, {location: true, inherit:true, notify:false})

但是ui-router忽略了没有为状态声明的参数。

我知道$ location.search让我可以访问URL搜索部分，但是如何设置URL（不更改状态和重新加载页面）？

Answer 1

这对我有用：

$stateProvider.state("alerts", { url: "/alerts/list?{query:json}" });

和

$state.go($state.current, {query: {a:1, b:2, c: '3'}}, {location: true, inherit:true, notify:false})

Answer 2

2013年的one of angular-ui's Github issue pages讨论很长。到目前为止，没有给出答案让每个人都满意，而且我是其中一个不满意的人。

到目前为止，最好的解决方法是仅使用查询参数（不是url路径参数），并将reloadOnSearch：true选项添加到计划使用动态查询参数的状态（更改它们而不重新加载页面）。这在a different StackOverflow answer here中讨论过。

截至我写这篇文章的那一天，有一个角度ui的分支，其中包含一些名为＆＃34;动态参数＆＃34;现在已经有300个提交，但可能已经解决了问题（但现在它已经远远落后于主人，我不想使用它）。还有一个即将发布的ui-router 1.0版本，但我不知道什么时候会发布。

Answer 3

确保您使用的是最新的1.x ui-router - 这很重要。然后在您的路线中，在参数设置中使用dynamic：true。这样可以防止刷新。像往常一样使用ui-sref - 根本不使用任何通知/重新加载/位置的东西，因为它会破坏东西 - 动态负责在后台正确设置它们。有了值，你可以设置一个默认值，如果它是空的，则squash会删除URL中的尾部斜杠（设置为'' - not null）。

.state('myappstate.somestate', {
        url: '/:a/:b/:c/:d',
        params: {
            a: {dynamic: true, value: 'someDefault'},
            b: {dynamic: true, value: 'anotherDefault'},
            c: {dynamic: true, value: '', squash: true},
            d: {dynamic: true, value: '', squash: true}
        }
    })

使用Angular UI Router在URL中设置动态参数

3 个答案: