AngularJS查询参数

AngularJS query parameters

本文关键字：参数 查询 AngularJS      更新时间：2023-09-26

我有一个使用UI路由器的小搜索应用程序，看起来像这样:

    '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模型。

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

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

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

更改url: '/search?q'，到url: '/search/:q'，并尝试从$stateParams.q中获取值

 .state('search', {            
        templateUrl: 'search/search.html',
        url: '/search/:q',           
        controller: 'SearchCtrl'
相关文章：