Question

我使用AngularJS（1.x）和Elasticsearch构建了一个小型搜索应用程序。自动完成（Angular UI Bootstrap Typeahead）正在运行但由于某种原因搜索功能不会在选择时执行，我不知道为什么。我想它可能与我的路由有关（状态 - 我正在使用UI路由器）。我正在使用多个命名视图，因为我在页面上需要2个控制器。

以下是我的州的样本：

.state('search', {
    url: '/search?q',
    views: {
    '': {templateUrl: '/modules/core/client/views/search.client.view.html'},
    'logo@search': {
        templateUrl: 'modules/core/client/views/search.logo.client.view.html',
      },
    'headersearchform@search': {
        templateUrl: 'modules/core/client/views/header.searchform.client.view.html',
        controller: 'SearchController',
        controllerAs: 'vm'
      },
    'user@search': {
        templateUrl: 'modules/core/client/views/header.authentication.client.view.html',
        controller: 'HeaderController',
        controllerAs: 'vm'
      },
    'indextabs@search': {
      templateUrl: 'modules/core/client/views/search.indextabs.client.view.html',
      controller: 'SearchController',
      controllerAs: 'vm'
      },

我是否将它们设置错误......或者这甚至不是搜索功能无法执行的原因？ ......完全失去了这个。

更新1 ：我刚刚切换到使用controllerAs语法，所以我的第一个想法是$ scope ...对不起。

这是我的搜索（）

    //search
vm.search = function() {
  $state.go('search');
  console.log(vm.searchTerms);
  vm.currentPage = 1;
  vm.results.documents = [];
  vm.isSearching = true;
  return coreService.search(vm.searchTerms, vm.currentPage).then(function(es_return) {
    var totalItems = es_return.hits.total;
    var totalTime = es_return.took;
    var numPages = Math.ceil(es_return.hits.total / vm.itemsPerPage);
    vm.results.pagination = [];
    for (var i = 0; i <= 100; i++) {
      vm.results.totalItems = totalItems;
      vm.results.queryTime = totalTime;
      vm.results.pagination = coreService.formatResults(es_return.hits.hits);
      vm.results.documents = vm.results.pagination.slice(vm.currentPage, vm.itemsPerPage);
    }
        vm.noResults = true;
      }),
    function(error){
      console.log('ERROR: ', error.message);
      vm.isSearching = false;
    },
    vm.captureQuery();
};

这是标题

中的搜索表单

<form ng-submit="vm.search()" class="navbar-form" id="global-search-form" role="search">

再次不知道为什么search（）不工作/显示。我有一个感觉 seach（）正在工作，因为我的控制台日志语句显示在Chrome的控制台中，但由于某种原因结果没有显示......？

代码正在我的开发代码库中工作（基本上是角度种子项目，但我开始将其移动到完整的MEAN堆栈，并认为我覆盖了所有基础......不确定发生了什么

提前致谢。

更新2 ：我很确定结果现在根本不显示。我把console.log语句放在搜索控制器中，从控制台中的那些语句可以看出，search（） IS 正在工作，只是结果没有显示...

我注意到标题下方的任何内容都没有显示数据......这就是我现在所处的位置......我在这个模板中放了很多多个命名视图 - 所有这些都有相同的控制器......保持简单

我不确定为什么使用controllerAs语法显示标题下面没有任何内容。我有一个简单的$ scope变量，但是控制器控制的任何东西都没有？

我的标题如下

    <header class="navbar navbar-static-top navbar-default" style="margin-bottom:0px;">
<div class="container" style="border:1px solid white;">
    <div ui-view="logo@search"></div>
  <div class="col-sm-3 col-md-6 pull-left">
    <div ui-view="headersearchform@search"></div>
  </div>

  <nav role="navigation">
    <div ui-view="user@search"></div>
  </nav>
</div>
</header><!--eof header-->

<!--bof results ui section-->

Answer 1

它看起来好像设置正确，你可以粘贴在JS中使用它的其余部分吗？我建议使用Postman或Runscope来验证API本身是否已关闭，因为它可能是一个问题。另请尝试使用url: '/search?'代替url: '/search?q'

Answer 2

我得到了它的工作。基本上我所做的是将结果页面作为视图对象中的布局页面，然后为标题中的用户显示创建了一个命名视图。所以我有一个shell页面，然后是一个名为view的视图...它不是我想要的，但是现在......它正在工作。我想要多个命名视图，因为它似乎更容易更新和改进ui的特定部分...我认为随着我越来越理解UI路由器它将会到达那里。

搜索结果未显示

2 个答案: