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

我一直试图让我的头与UI路由器的查询参数，并认为我终于明白了为什么我有这么难与它。我建有2个状态的小的搜索应用程序：UI路由器查询参数和多个状态

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

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

家国家都有自己的模板（视图）等进行搜索的状态。他们共享相同的控制器。基本上所有家庭状态都会提供一个搜索框来输入您的搜索查询或从自动完成中进行选择。

一旦你提交了搜索查询，它通过

$state.go('search');

进入搜索状态，我尝试过很多办法使用UI路由器的搜索页面上的网址，以获取用户的搜索词（S）在url: '/search?q'与$ stateParams控制器组合查询参数语法设置为

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

我有它切换到$state.params.q但没有解决它。

我已经成功了能够得到的查询参数的URL，但是，当我这样做，它打破了搜索功能。自动完成和查询参数的工作和显示，但搜索功能停止。

不过，我想，我终于明白为什么它不工作我想它喜欢的方式。我相信这与我使用2个状态而不是一个具有嵌套子状态的父状态并且模板不是嵌套的事实有关 - 因此$ scope不会继承。我正在接近这个工作......它从主状态转换到在搜索状态的url中显示查询参数的搜索状态...它简单地说是搜索中断，但自动完成和查询参数正在工作。

我试图做到的，是让用户从家乡输入搜索词，然后在搜索结果的状态显示在URL查询参数一起。有什么我需要做的首页州或搜索状态，我没有做？

有没有在我的搜索任何东西（）在我的控制器可能是问题

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

来源

2017-02-16 user3125823

您可以通过两种方式将参数添加到您的网址，使用冒号：

'url': '/search/:query'

或大括号：

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

然后你可以使用的$state的go方法与参数化：

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

或：

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

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

console.log($stateParams.query);

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

来源

2017-02-17 09:55:22 iH8

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

回答

相关问题