UI Router Parameter und Angular $ http Anruf

Question

Ich versuche, meine Suche App (AngularJS und Elasticsearch) zu konfigurieren, um die Suchbegriffe des Benutzers in der URL auf der Ergebnisseite anzuzeigen, nachdem die Suche durchgeführt wurde. Sollte dieser Parameter als Abfrageparameter oder URL-Parameter betrachtet werden? Ich verwende den UI Router für meine Zustände und habe ihn derzeit als Abfrageparameter eingerichtet, wie Sie unten sehen können. Mit der aktuellen Einstellung bricht es jedoch die Suche ab.

Also 1), sollte es ein URL-Parameter sein? 2) Wie konfiguriere ich richtig meine search(), um Params in meinem Angular $http get Anruf, so dass die Suche funktioniert?

Für meine Zustände (ui Router)

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

Wo Benutzer Suchbegriffe eingibt, dann

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

wo die Ergebnisse angezeigt werden und mehr Suchvorgänge können

Für die Suche durchgeführt werden() in meinem Controller

//for query parameters 
var config = { 
    params: { 
    q: vm.searchTerms 
    } 
}; 

//search() 
vm.search = function() { 
    $state.go('search', {q: vm.searchTerms}); 
    console.log(vm.searchTerms); 
    console.log('success - search'); 
    vm.currentPage = 1; 
    vm.results.documents = []; 
    vm.isSearching = true; 
    return coreService.search(vm.searchTerms, vm.currentPage, config 
) 
    .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'); 
}; 

Der Abfrageparameter befindet sich in der URL, aber die Suche bricht nicht ab.

UPDATE Weitere Details. Sie geben Ihre Abfrage auf der Startseite ein ("Home") und dann, wenn Sie Ihre Anfrage gesendet haben, verwende ich $ state.go, um in den Status "Suchen" zu wechseln, was die Ergebnisseite ist. Die Startseite und die Ergebnisseite verwenden zwei verschiedene Vorlagen für ihre Ansichten. Also habe ich 2 Suchfelder - 1 auf der Startseite und 1 auf der Ergebnisseite.

Die Suchbegriffe werden in der URL angezeigt, ob ich vom Status "Home" aus starte oder die Abfrage in den Status "Suchen" eingabe. Alles, was bricht, ist die Suchfunktionalität - was WAS funktioniert, bevor ich versuchte, den Parameter in der URL zu implementieren.

Auch init ich vm.searchTerms wie diese

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

Nicht sicher, ob das einen Unterschied macht oder das Problem verursacht?

Answer 1

Was ich tun würde, ist nach dem Absenden der Suchanfrage, um Benutzer auf eine Vorlage umzuleiten, die Abfrage in $state.params URL übergeben. Dann in SearchController würde ich die search() durchführen, wenn es irgendwelche Parameter gibt. Auf diese Weise werden die Parameter auch nach dem Aktualisieren der Seite weiterhin auf der URL angezeigt, und es wird ein neuer search() aufgerufen, und nach der Kommunikation mit der API werden Ergebnisse angezeigt.