Question

我有一个使用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个提交结果才能显示，如果用户想要输入不同的查询，搜索状态也需要相同。

查询是否根据需要显示在网址中，但是需要另一次提交以显示结果...？

我在$stateParams

中初始化SearchCtrl

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

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

我在$state.go()的搜索功能

中设置SearchCtrl

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

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

Answer 1

将网址：'/ search？q'更改为网址：'/ search /：q'并尝试从$ stateParams.q获取值

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

AngularJS查询参数

1 个答案: