AngularJS 查询参数答案

【问题标题】：AngularJS query parametersAngularJS 查询参数
【发布时间】：2016-08-23 23:31:38
【问题描述】：

我有一个使用 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) 个控制器。不正确的是，从主状态到搜索状态，搜索功能需要 2 次提交才能显示结果，如果用户想输入不同的查询，搜索状态也需要同样的结果。

查询正在根据需要显示在 url 中，但需要再次提交才能显示结果...？

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

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

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

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

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

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

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

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

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

【讨论】：

我按照你的建议做了，它只是将 url 从 /search?=query 更改为 search/query。结果仍然需要第二次提交。任何想法。
'/search/:query' ':' 是必需的。并从 $stateParams.query 中读取值
是的，我使用了 url: '/search/:q'，但在我的第一条评论中仍然得到了结果
您的网址是什么样的？应该是your_domain/search/your_search_string
只是为了测试，能否在 home.html 中添加一个带有 ui-sref="search({q: 'test'})" 的 'a' 标签？