UI Router ile AngularJS garip sorgu davranışı

Question

Elasticsearch ve AngularJS kullanarak küçük bir arama uygulamasına sahip olun. Gönderim düğmesindeki aramamda() $state.go() kullanıyorum. searchTerms, girişteki modelimdir.

2 tane denetleyicim var, homeCtrl ve searchCtrl. homeCtrl, yalnızca bir arama kutusu olan ve otomatik tamamlama işlevselliği sağlayan ana sayfa içindir. searchCtrl sonuç sayfası için aynı arama kutusuna sahiptir ve sonuçlar alanı sağlar.

böyle $state.go() varsa: Bu doğru

http://localhost:8000/app/search?q=searchTerms 

YERİNE şimdi Yani

http://localhost:8000/app/search?q=userTypedInput 

url işlevleri oldu ben olmamdı bir sorun çözüldü

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

, ancak arama sonuçları görüntülenmiyor ...?

---

Ben

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

arama sonuçları ekrana sahip ANCAK istenilen gibi url çalışmaz zaman.

Böylece temelde soruyorum ben

http://localhost:8000/app/search?q=userTypedInput 

olan istediğiniz gibi benim url işlev olsun VE hala arama sonuçları ekrana sahip olabilir nasıl?

GÜNCELLEME Bunlar benim devletler ui yönlendirici için

$stateProvider 
    .state('home', { 
    url: '/home', 
    templateUrl: 'home/home.html', controller: 'homeCtrl'}) 
    .state('search', { 
    url: '/search?q', 
    views: { 
     '' : { templateUrl: 'search/search.html', controller: 'searchCtrl' } 
     //add more views here when necessary 
    } 
    }); 

searchCtrl

olan bu üst

'use strict'; 

angular.module("searchApp.search", ['ngAnimate']) 
    .controller('searchCtrl', ['$scope', '$sce', '$stateParams', '$state', 'searchService', function($scope, $sce, $stateParams, $state, searchService) { 

    $scope.searchTerms = $stateParams.searchTerms || null; 

de var ve bu arama(), hangi $state.go()içerir

$scope.search = function() { 
    resetResults(); 

    var searchTerms = $scope.searchTerms; 

    if (searchTerms) { 
     $scope.results.searchTerms = searchTerms; 
    } else { 
     return; 
    } 

    getResults();//calls searchService which does the searching 

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



var getResults = function() { 
$scope.isSearching = true; 

searchService.search($scope.results.searchTerms,$scope.currentPage,... 

Ben url

http://localhost:8000/app/search?q=userTypedInput 

olmalı ve aynı zamanda sonuç görüntüsünün olması almaya çalışıyorum.

Answer 1

Durum yapılandırmanızda, arama sorgusunu iletmek için q parametre adını kullanırsınız. Bu ad, searchCtrl'unuzdaki $stateParams parametresine erişirken de kullanmanız gereken addır. Yukarıda gösterilen kodda, sorgunuz her zaman boş olacaktır, çünkü mevcut olmayan searchQuery isimli parametreye erişirsiniz.