javascript - AngularJS 查询参数

Question

我有一个使用 UI Router 的小型搜索应用程序，如下所示:

    'use strict';

angular.module('searchApp.routes', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

        $locationProvider.html5Mode(true);

        $stateProvider
           .state('home', {
            url: '/home',           
            templateUrl: 'home/home.html',
            controller: 'SearchCtrl'})         
          .state('search', {            
            templateUrl: 'search/search.html',
            url: '/search?q',           
            controller: 'SearchCtrl'
          });    
    $urlRouterProvider.otherwise('/home');
}]);

因此，您可以看到两 (2) 个状态、两 (2) 个模板和一 (1) 个 Controller 。不正确的是，从主状态到搜索状态，搜索功能需要两次提交才能显示结果，如果用户想要输入不同的查询，则在搜索状态上也需要同样的提交。

查询已根据需要显示在网址中，但随后需要再次提交才能显示结果...？

我在 SearchCtrl 中像这样初始化 $stateParams

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

其中 searchTerms 是搜索表单上我的 ng-model。

我在搜索功能的 SearchCtrl 中有这样的 $state.go() 设置

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

我错过了什么和/或做错了什么？

Answer 1

将 url: '/search?q' 更改为 url: '/search/:q' 并尝试从 $stateParams.q 获取值

 .state('search', {            
        templateUrl: 'search/search.html',
        url: '/search/:q',           
        controller: 'SearchCtrl'