UI路由器和查询参数

Question

我使用Angular，UI路由器和Elasticsearch构建了一个小型搜索应用程序，我试图在结果页面的网址中获取UI路由器查询参数。

我试图实现这个目标

.state('search', {
        url: '/search?q',

用这个

vm.searchTerms = $stateParams.q || '';

我在我的控制器中初始化了searchTerms和$ stateParams

 vm.search = function() {
          $state.go('search', {q: vm.searchTerms});
...

然后在我的控制器中的搜索功能中我有这个

{{1}}

一切正常，直到我尝试实现UI Route查询参数。我仍然可以获得搜索建议，从州到州，但搜索中断。

我认为我需要在config {}中实现Angular $ http get params，但后来我意识到我必须尝试使用​​UI路由器获取查询参数。看来我用UI路由器设置了一切来获取查询参数，但是......我做错了什么？

Answer 1

对于查询参数，您应该使用 $state.params 而不是$stateParams

国家配置：

stateProvider.state({
    name: 'search',
    url: '/search?q',
    //...
}

CONTROLLER FROM：

function fromCtrl ($state) {
    $state.go('search', {q: vm.searchTerms});
}

OR TEMPLATE / HTML LINK FROM：

<a ui-sref="search({q:'abc'})">my Link</a>

控制器：

function toCtrl ($state) {
    this.searchTerms = $state.params.q;
}

<小时/> 更新：$transition$用于新版本＆gt; = 1.0.0（PLUNKER DEMO）
上述代码对于两个版本都是相同的，只需要更改toCtrl ...

function toCtrl ($transition$) {
  this.myParam = $transition$.params().q;
}

如果您的searchTerms是对象，则可以使用JSON.stringify()和JSON.parse()


如果您还有任何疑问，请查看这些帖子：
How to extract query parameters with ui-router for AngularJS?
AngularJS: Pass an object into a state using ui-router