Question

使用AngularJS和Elasticsearch构建了一个小型搜索应用程序，我尝试使用$scope转换为controller As语法，因为这似乎是一件非常好的事情，并且强烈推荐。< / p>

包含主页和搜索结果页面的真正简单的应用程序。主页有自动填充的搜索框和结果页面相同的空间结果。

我在我的路线/状态中使用UI路由器：

$stateProvider
  .state('home', {
    url: '/home',
    templateUrl: 'home/home.html',
    controller: 'HomeCtrl as home'})
  .state('search', {
    url: '/search?q',
    views: {
      '' : {templateUrl: 'search/search.html',
            controller: 'SearchCtrl as search'}
    }
  });

要替换控制器中的$scope服务，我做了

    'use strict';

angular.module("searchApp.autocomplete", ['ngAnimate'])
  .controller('HomeCtrl', ['$sce', '$state', '$stateParams', 'searchService', 'filterService', function($sce, $state, $stateParams, searchService, filterService) {

    var vm = this;...

并将所有$scope.替换为vm.两个控制器。

我已经在html文件中的每个模板的div中添加了ng-controller="SomeCtrl as some"但由于某种原因我现在无法让该应用程序正常工作。

我的链接仍然有用（ui-sref）所以我可以在页面之间导航，但自动完成和搜索功能已经消失。当我在Chrome开发工具中检查控制台时，它会显示

Uncaught ReferenceError: searchTerms is not defined(…)

但是在var vm = this之后我有vm.searchTerms = $stateParams.q || null;;在控制器中。

searchTerms是

上的ng-model

在尝试转换为controller As语法之前，一切都很有效。究竟我做错了什么，因为它看起来非常简单。

更新根据要求，我的模板代码

    <form ng-submit="search()" class="form-horizontal col-md-8 col-md-offset-2" id="hp-search-form">
  <div class="input-group input-group-lg">
    <input type="text" name="q" ng-model="searchTerms" placeholder="Search" class="form-control input-lg" id="search-input" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)" auto-focus>

      <span class="input-group-btn">
      <button class="btn btn-primary btn-lg" type="submit" value="Search" class="btn btn-primary" id="hp-search-button" ng-submit="search()">Search
      </button>
    </span>
  </div>
</form>
<a ui-sref="search">Search Page</a>

Answer 1

试试这个。您应该在模板中的所有模型和函数之前添加controllerAs（在此模板中搜索）。

<input type="text" name="q" ng-model="search.searchTerms" placeholder="Search" class="form-control input-lg" id="search-input" uib-typeahead="query for query in search.getSuggestions($viewValue)" typeahead-on-select="search.search($item)" auto-focus>

Controller As语法与搜索输入表单

1 个答案: