UI Router Query-Parameter und mehrere Zustände

Question

Ich habe versucht, um Abfrageparameter mit UI Router Kopf zu bekommen und denke, ich habe endlich herausgefunden, warum ich so eine harte Zeit damit habe. Ich baue eine kleine Suche App, die 2 Zustände hat:

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

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

Der Heimatstaat hat seine eigene Vorlage (Ansicht) und damit auch den Suchzustand. Sie teilen sich den gleichen Controller. Im Grunde stellt jeder Heimatstaat ein Suchfeld zur Verfügung, um Ihre Suchanfrage einzugeben oder eine automatische Vervollständigung zu wählen.

Sobald Sie Ihre Suchkriterien eingereicht haben geht es zum Suchzustand über

$state.go('search'); 

Ich habe viele Möglichkeiten ausprobiert des Benutzers Suchbegriff (e) in der URL auf der Suchseite mit UI Routers zu erhalten Abfrageparameter Syntax in den url: '/search?q' mit $ stateParams im Controller kombiniert gesetzt, wie

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

ich es $state.params.q eingeschaltet hatte, aber das hat nicht beheben.

Ich konnte erfolgreich die Abfrageparameter in der URL erhalten, aber wenn ich es tue, bricht es Suchfunktionalität. Die Parameter für die automatische Vervollständigung und die Abfrage funktionieren und werden angezeigt, die Suchfunktion wird jedoch beendet.

Allerdings glaube ich endlich zu verstehen, warum es nicht so funktioniert, wie ich es möchte. Ich glaube, dass es mit der Tatsache zu tun hat, dass ich 2 Zustände und nicht einen Eltern-Staat mit einem geschachtelten Kind-Zustand verwende und dass die Schablonen nicht geschachtelt sind - also erbt $ scope nicht. Ich bin in der Nähe dieser Arbeit ... es wechselt vom Heimatstaat in den Suchzustand Anzeige von Abfrage-Parameter in der URL des Suchstatus ... es einfach, dass die Suche bricht, aber Autocomplete und Abfrage-Parameter funktionieren.

Was ich versuche zu erreichen ist, den Benutzer geben Suchbegriffe aus dem Heimatstaat eingeben und dann Ergebnisse im Suchstatus zusammen mit Abfrageparameter in der URL anzeigen lassen. Gibt es irgendetwas, was ich tun muss mit zu Hause Zustand oder Suche Zustand, dass ich nicht tun?

ODER

Gibt es etwas in meiner Suche() in meinem Controller, der das Problem

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

Sie einen Parameter zu Ihrer URL auf zwei Arten sein könnte, benutzen Sie Doppelpunkt hinzufügen:

'url': '/search/:query' 

oder geschweiften Klammern:

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

Dann können Sie die go Methode von $state mit dem Parameter für den Übergang verwenden:

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

oder:

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

Sie den Wert des Parameters von dem Controller unter Verwendung des params Mitglied Ihres $state Objekt zugreifen direkt vom $stateParams Objekt:

console.log($stateParams.query); 

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