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