UI 路由器和查询参数

我使用 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 路由查询参数。我仍然可以获得搜索建议，从一个状态转换到另一个状态，但搜索会中断。

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

对于查询参数，您应该使用$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;
}

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

如果您的 searchTerms 是一个对象，您可以使用JSON.stringify() and JSON.parse()


如果您仍然有任何疑问，请查看这些帖子：
如何使用 AngularJS 的 ui-router 提取查询参数？ https://stackoverflow.com/questions/19053991/how-to-extract-query-parameters-with-ui-router-for-angularjs
AngularJS：使用 ui-router 将对象传递到状态 https://stackoverflow.com/questions/20632255/angularjs-pass-an-object-into-a-state-using-ui-router