Question

我一直试图通过UI路由器了解查询参数，并认为我终于弄清楚为什么我会遇到这么困难。我正在构建一个有两种状态的小型搜索应用程序：

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

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

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

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

进入搜索状态

$state.go('search');

我已经尝试了多种方法，使用url: '/search?q'中的UI路由器查询参数语法，在搜索页面的网址中获取用户的搜索字词。控制器中的$ stateParams设置为

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

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

我已经成功地在网址中获取了查询参数，但是，当我这样做时，它会破坏搜索功能。自动完成和查询参数可以工作和显示，但搜索功能会停止。

然而，我想我终于理解为什么它不按照我喜欢的方式工作。我认为这与我使用2个状态而不是具有嵌套子状态的父状态并且模板不是嵌套的事实有关 - 因此$ scope不会继承。我接近这个工作......它从主页状态转换到搜索状态，在搜索状态的URL中显示查询参数...它只是搜索中断，但自动完成和查询参数是工作

我想要实现的是让用户从家庭状态输入搜索词，然后在搜索状态中显示结果以及URL中的查询参数。对于主页状态或搜索状态，我需要做些什么吗？

OR

我的控制器中的搜索（）中是否有任何可能是问题的内容

//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}'

然后，您可以使用go $state方法和参数进行转换：

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

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

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

或直接来自$stateParams对象：

console.log($stateParams.query);

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

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

1 个答案: