UI Router和查询参数

Question

我使用 Angular、UI Router 和 Elasticsearch 构建了一个小型搜索应用程序，并且正在尝试在结果页面中获取 URL 中的 UI Router 查询参数。 我正在尝试实现这个目标。

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获取参数，但后来我意识到我只是想使用UI Router获取查询参数。看起来我已经正确设置了UI Router以获取查询参数，但是……我做错了什么？

- user3125823

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;
}

---

更新: 对于新版本>=1.0.0，请使用$transition$（PLUNKER DEMO）
上面的代码对于两个版本都是相同的，只需要更改toCtrl ...

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

如果您的searchTerms是一个对象，可以使用JSON.stringify()和JSON.parse()。如果您仍然有任何疑问，请查看这些帖子：
如何使用ui-router提取AngularJS的查询参数？
AngularJS：使用ui-router将对象传递给状态

- The.Bear