UI路由器和查询参数

Question

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

我正在努力实现这一目标

domain.com/search?user_search_terms

有了这个

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

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

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

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

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

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

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

Answer 1

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

国家配置:

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

控制器来自:

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

或模板/ HTML链接来自:

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

控制器:

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

更新:使用$transition$新版本> = 1.0.0(PLUNKER DEMO)
上面的代码是两个版本一样,只是你需要改变toCtrl......

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

如果您的searchTerms是一个对象,JSON.stringify()JSON.parse()


如果您仍有疑问,可以使用和检查这些帖子:
如何使用ui-router为AngularJS提取查询参数？
AngularJS:使用ui-router将对象传递到某个状态