AngularJS UI Маршрутизатор и поиск

Question

Я построил небольшое поисковое приложение, используя AngularJS, UI Router и Elasticsearch. У меня есть 2 шаблона, в которых есть один контроллер. Все работает правильно ... за исключением тех случаев, когда я пытаюсь реализовать параметры запроса.

Один шаблон - простой hp для ввода поискового запроса или выбора из автозаполнения (UI Bootstrap Typeahead). Другой шаблон предназначен для результатов поиска и поиска (поле поиска и область для отображения результатов поиска).

Мои состояния выглядеть следующим образом:

.state('query', {//home 
    url: '/', 
    templateUrl: 'search/query.html', 
    controller: 'searchCtrl as vm' 
}) 
.state('search', {//results 
    url: '/search?q', 
    templateUrl: 'search/search.html', 
    controller: 'searchCtrl as vm' 
}); 

Я использую $ state.go (в searchCtrl) от пользовательского интерфейса маршрутизатора для перехода между состояниями.

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

Что происходит, что после ввода запроса/выбора автозаполнения он переходит в состояние «поиск», но я вижу это в URL

http://localhost:8000/app/#/search?q=%5Bobject%20Object%5D 

Тогда я должен снова ввести запрос и url изменяется на

http://localhost:8000/app/#/search?q=userinput 

Наконец, я должен снова ввести запрос для выполнения поиска. Очевидно, я хочу, чтобы все это происходило с ОДНОЙ отправкой. Что я делаю не так?

Любые предложения или идеи?

UPDATE У меня есть это в отдельном файл run.js

.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) { 
$rootScope.$state = $state; 
$rootScope.$stateParams = $stateParams; 

---

UPDATE 2 Я получаю ту же ошибку, использую ли я свой код или код. Похоже, что когда я перехожу из «состояния» в «состояние», этот поиск возвращается с помощью метода $scope works in Angular. Я не уверен, как это разрешить, потому что я не уверен, что предоставленное там решение будет работать с синтаксисом controllerAs. Было бы разумнее иметь autocompleteCtrl для страницы hp/query и иметь запросService, введенный в каждый контроллер для searchTerms? Pls дает немного больше времени, чтобы разблокировать кодеп, отправит вам комментарий, когда будет сделано.

Answer 1

Какую версию углового 1 вы используете?

Я собрал очень быстрый и грубый код с тем, что, как я думаю, вы пытаетесь достичь, сообщите мне, если вы это сделаете, и если это поможет вообще.

$stateProvider 
    .state('search', { 
    url: '/', 
    controller: 'myController as vm', 
    template: '<div class="row"><form ng-submit="vm.query()"><div class="col-sm-10"><input class="form-control" ng-model="vm.search"></div><div class="col-sm-2"> <button class="btn btn-sm btn-default" ng-click="vm.query()">Search</button></div></form></div>' 
    }) 
    .state('query', { 
    url: '/query?q', 
    controller: 'myController as vm', 
    template: '<div class="row">Query: {{vm.search}}</div>' 
    }); 

$urlRouterProvider.otherwise('/'); 

обновляйте CodePen - Working Pen

По какой-то причине порядок углового и пользовательского интерфейса маршрутизатора был изменен.

Answer 2

Вы должны использовать $ stateParams следующим образом:

.state('search', {//results 
    url: '/search/:q', 
    templateUrl: 'search/search.html', 
    controller: 'searchCtrl as vm' 
}); 

Тогда в контроллере можно вводить $stateParams и получить доступ к значению этого параметра с $stateParams.q.

Надеюсь, это поможет.