Question

使用Elasticsearch和AngularJS创建一个小型搜索应用。我在我的ng-submit按钮上的search（）中使用了$state.go()。 searchTerms是我输入的ng模型。

我有2个控制器，homeCtrl和searchCtrl。 homeCtrl用于主页，它只是一个搜索框，并提供自动完成功能。 searchCtrl用于结果页面，并具有相同的搜索框并提供结果区域。

当我$state.go()这样时：

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

它解决了我遇到的问题，这是

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

INSTEAD

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

所以现在url正常运行，但搜索结果不显示......？

当我有

时

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

搜索结果显示但网址无法正常运行。

所以基本上我要问的是如何让我的网址按照需要运行

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

并且仍然显示搜索结果？

更新这些是ui路由器的状态

$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

我在顶部有这个

    '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;

这是search（），其中包含$state.go()

    $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,...

我正试图让网址

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

并显示结果。

Answer 1

在州配置中，使用参数名q来传递搜索查询。这是名称，您还需要在$stateParams中访问searchCtrl中的参数时使用。在上面显示的代码中，您的查询将始终为null，因为您访问的名为searchQuery的参数不存在。

使用UI路由器的AngularJS奇怪的查询行为

1 个答案: