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

我以为我需要在配置 {} 中实现 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});
}

或TEMPLATE/HTMLLINK来自：

<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()

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

UI 路由器和查询参数

UI Router and query parameters

query-parameters

angularjs

angular-ui-router