AngularJS用戶界面路由器$ state.go不工作

Question

我有一個使用AngularJS和Elasticsearch的小型搜索應用程序，我試圖讓UI路由器的$state.go()將我的查詢參數包含在URL中，並且無法讓它工作...... 。不知道爲什麼？

在Chrome的地址欄輸入：http://localhost:8000/app/search?q=searchTerms

，並保持這種方式，即使搜索執行 - 當它應該是：http://localhost:8000/app/search?q=userTypedInput

在我的路線（州）我有

$stateProvider 
     .state('search', { 
     url: '/search', 
     url: '/search?q', 
     $stateParams: {q: 'searchTerms'}, 
     views: { 
      '' : {templateUrl: 'search/search2.html', 
       controller: 'SearchCtrl', 
       contollerAs: 'search'} 
      //add more views here when necessary 
     } 
     }); 

和我的控制器我有

'use strict'; 

angular.module('searchApp.search', []) 
    .controller('SearchCtrl', ['$scope', '$sce', '$state', '$stateParams', 'searchService', function($scope, $sce, $state, $stateParams, searchService) { 
     //Initialize 
     //$scope.searchTerms = $stateParams || ''; 
    $scope.searchTerms = ''; 
     $scope.noResults = false; 
     $scope.isSearching = false; 

     //pagination 
     //$scope.currentPage = 0; 
     //$scope.itemsPerPage = 10; 

     //results 
     $scope.results = { 
     queryTime: null, 
     documentCount: null, 
     documents: [] 
     }; 

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

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

    searchService.search($scope.searchTerms).then(function(response) { 
... more code 

我做錯了什麼？結果顯示，我根本無法獲得與$ state.go中的查詢參數，因爲我有它？

Answer 1

angular.module("myApp", []).run(["$rootScope","$state","$stateParams", function($rootScope, $state, $stateParams) { 
    $rootScope.$state = $state; 
    $rootScope.$stateParams = $stateParams; 
}]); 

$stateProvider.state('search', { 
    url: '/search?q', 
    //don't specify $stateParams here 
    views: { 
     '': { 
      templateUrl: 'search/search2.html', 
      controller: 'SearchCtrl', 
      controllerAS: 'search' 
     } 
     //add more views here when necessary 
    } 
});