angularjs - UI 路由器和查询参数

Question

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

我正在努力实现这一目标

domain.com/search?user_search_terms

有了这个

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

我在 Controller 中像这样初始化 searchTerms 和 $stateParams

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

然后在我的 Controller 的搜索功能中，我有这个

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

一切正常，直到我尝试实现 UI 路由查询参数。我仍然可以获得搜索建议，从一个状态转换到另一个状态，但搜索中断。

我以为我需要在 config {} 中实现 Angular $http get params，但后来我意识到我只是在尝试使用 UI 路由器获取查询参数。似乎我已经使用 UI 路由器正确设置了所有内容以获取查询参数，但是......我做错了什么？

Answer 1

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

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

Controller 来自:

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

或模板/HTML 链接来自:

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

Controller 至:

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()
如果您仍有任何疑问，请查看这些帖子:

How to extract query parameters with ui-router for AngularJS?

AngularJS: Pass an object into a state using ui-router