Controller As语法与搜索输入表单

时间:2016-04-13 18:04:26

标签: javascript angularjs

使用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>

1 个答案:

答案 0 :(得分:0)

试试这个。您应该在模板中的所有模型和函数之前添加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>