Question

我正在使用AngularJS和Elasticsearch构建一个小型搜索应用程序，并在主页上（第1页）我只有一个简单的标题，搜索框和页脚开头。在搜索结果页面（第2页）上显示结果，还有其他过滤器等供用户使用。

我使用ui-router作为路线，并且在用户输入自动完成下拉列表中的术语或所选术语后，很难弄清楚如何将第1页转到第2页。

    config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

编辑：我刚注意到我的.state错了，需要纠正。很快就会有更新

更新路线

$stateProvider
.state('search', {
  url: '/',
  views: {
    '': {templateUrl: 'templates/search.html'},
    'nav@search': {templateUrl: 'templates/navbar.html', controller: 'TypeaheadCtrl'},
    'searchList@search': {templateUrl: 'templates/results.html', controller: 'TypeaheadCtrl'},
    'pagination@search': {templateUrl: 'templates/pagination.html', controller: 'TypeaheadCtrl'}
  }
})

结果页面上的表单（第二页）

更新后的表格

<form ng-submit="search()" class="navbar-form" id="global-search" role="search">
    <div class="input-group">
        <input type="text" name="q" ng-model="searchTerms" class="form-control input-md" placeholder="Search" id="search-input" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)" autofocus>
        <div class="input-group-btn">
            <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
        </div>
    </div>
    </form>

更新信息 在学习并升级到UI-Router（很棒）后，我做了一些不同的选择并改变了我的观点。我不再做一个＆＃34;两页SPA＆＃34;但只是将它保存到一个页面，主要是结果页面。我的主页（以前的第一页）和结果页面上都有一个搜索表单，我仍然需要弄清楚如何在我的搜索按钮上合并$ state.go（）并在两个搜索表单上使用ng-submit。目前所有ng-submit都是调用search（）。

$scope.search = function() {
resetResults();
$scope.filters.selectedFilters = [];

var searchTerms = $scope.searchTerms;

if (searchTerms) {
  $scope.results.searchTerms = searchTerms;
} else {
  return;
}

getResults();//uses a service to get results from search server

};

我猜猜$ state.go（＆＃39; / search＆＃39;，{term：$ scope.searchTerms}）应该在getResults（）之前出现？仍然围绕着所有UI路线。任何带有工作示例的链接都会很棒!!

Answer 1

您需要从表单中删除action和method。

当离开时，angular将这些视为通过浏览器默认进程提交表单的意图。然后，action会将表单中的数据路由到服务器上http://example.com/search的路径。

这会导致您的服务器返回404。

使用ng-submit执行您的搜索路径处理查询所需的任何内容，并执行$state.go('/search', {term: $scope.searchTerms})

之类的操作

一个两页的单页应用程序

1 个答案: