UI 路由器查询参数和多个状态

Question

我一直在努力了解 UI 路由器的查询参数，我想我终于明白了为什么我在使用它时遇到了这么困难。我正在构建一个具有 2 个状态的小型搜索应用程序：

$stateProvider
      .state('home', {
        url: '/',

.state('search', {
        url: '/search',
        },

主状态有自己的模板（视图），搜索状态也有。他们共享同一个控制器。基本上所有本地状态都提供一个搜索框来输入您的搜索查询或从自动完成中选择。

提交搜索查询后，它将通过

进入搜索状态

$state.go('search');

我尝试了很多方法来使用 UI 路由器在 url: '/search?q' 中的查询参数语法结合搜索页面上的 url 中的用户搜索词控制器中的 $stateParams 设置为

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

我已将其切换为 $state.params.q，但这并没有解决问题。

我已成功获取 url 中的查询参数，但是，当我这样做时，它会破坏搜索功能。自动完成和查询参数工作并显示，但搜索功能停止。

但是，我想我终于明白为什么它没有按我希望的方式工作了。我相信这与以下事实有关：我使用的是 2 个状态，而不是一个具有嵌套子状态的父状态，并且模板未嵌套 - 因此 $scope 不继承。我正在接近这个工作......它从家庭状态转换到搜索状态，在搜索状态 url 中显示查询参数......只是搜索中断，但自动完成和查询参数正在工作。

我想要实现的是让用户从主页状态输入搜索词，然后在搜索状态下显示结果以及 url 中的查询参数。 home state 或 search state 有什么我需要做但我没有做的吗？

或

我的控制器中的 search() 中是否有任何可能是问题所在

//search()
    vm.search = function() {
      //$state.go('search', {q: vm.searchTerms});
      $state.go('search');
      console.log(vm.searchTerms);
      console.log('success - search');
      vm.currentPage = 1;
      vm.results.documents = [];
      vm.isSearching = true;
      return coreService.search(vm.searchTerms, vm.currentPage)
        .then(function(es_return) {
          console.log('success - return');
          var totalItems = es_return.hits.total;
          var totalTime = es_return.took;
          var numPages = Math.ceil(es_return.hits.total / vm.itemsPerPage);
          vm.results.pagination = [];
          for (var i = 0; i <= 10; i++) {
            console.log('success - for');
            vm.results.totalItems = totalItems;
            vm.results.queryTime = totalTime;
            vm.results.pagination = coreService.formatResults(es_return.hits.hits);
            vm.results.documents = vm.results.pagination.slice(vm.currentPage, vm.itemsPerPage);
            console.log('success - documents');
          }
              vm.noResults = true;
            }),
          function(error){
            console.log('ERROR: ', error.message);
            vm.isSearching = false;
          },
          vm.captureQuery();
          console.log('success - captureQuery');
      };

Answer 1

您可以通过两种方式向 URL 添加参数，使用冒号：

'url': '/search/:query'

或花括号：

'url': '/search/{query}'

然后可以使用$state的go方法带参数进行转换：

$state.go('search', {'query', 'foobar'});

您可以使用 $state 对象的 params 成员从您的控制器访问参数值：

console.log($state.params.query);

或直接来自 $stateParams 对象：

console.log($stateParams.query);

参考：https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters

UI 路由器查询参数和多个状态

UI Router query parameters and multiple states

search

angular-ui-router

query-parameters