2017-02-15 5 views
5

Ich baute eine kleine Suche App mit Angular, UI Router und Elasticsearch und ich versuche UI Router Abfrageparameter in der URL auf der Ergebnisseite zu erhalten.UI Router und Abfrageparameter

Ich versuche, diese

domain.com/search?user_search_terms 

mit diesem

.state('search', { 
     url: '/search?q', 

zu erreichen, und ich init search und $ stateParams wie dies in meinem Controller

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

und dann in meinem Suchfunktion in meinem Controller Ich habe diese

vm.search = function() { 
      $state.go('search', {q: vm.searchTerms}); 
... 

Alles funktioniert gut, bis ich versuche, die UI Route Query-Parameter zu implementieren. Ich kann immer noch Suchvorschläge bekommen, Übergang von Staat zu Staat, aber Suchpausen.

Ich dachte, ich musste Angular $ http Get Params innerhalb einer Config {} implementieren, aber dann erkannte ich, ich bin nur versucht, Abfrageparameter mit UI Router zu erhalten. Es sieht so aus, als hätte ich alles mit UI Router richtig eingerichtet, um Abfrageparameter zu erhalten, aber ... was mache ich falsch?

Antwort

7

Für Abfrageparameter, sollten Sie $state.params statt $stateParams

PLUNKER DEMO

STATE CONFIG verwenden:

stateProvider.state({ 
    name: 'search', 
    url: '/search?q', 
    //... 
} 

Controller aus:

function fromCtrl ($state) { 
    $state.go('search', {q: vm.searchTerms}); 
} 

Controller:

function toCtrl ($state) { 
    vm.searchTerms = $state.params.q || ''; 
} 

Wenn Ihr search ein Objekt ist, Sie JSON.stringify() und JSON.parse()


Schauen Sie sich diese Beiträge verwenden können, wenn Sie noch irgendwelche haben Zweifel:
How to extract query parameters with ui-router for AngularJS?
AngularJS: Pass an object into a state using ui-router

+0

Dank für die Links zu – user3125823