Question

使用AngularJS和Elasticsearch建立一个小型搜索应用。尝试将我的应用从使用$scope转换为controller As语法。我使用UI路由器作为路由/状态。一直在尝试使用

controller: 'HomeCtrl',
controllerAs: 'home'

在我的州宣言中。然后在控制器中var vm = this;绑定到范围。

我将搜索输入上的ng-model="searchTerms"切换为ng-model="home.searchTerms"，其他任何地方都需要绑定。它都不起作用吗？

在父div中使用ng-controller="HomeCtrl as home"会更好吗？这是最佳做法吗？它会与UI路由器一起使用吗？

更新我现在有

var vm = this;
vm.searchTerms = searchTerms;

但它仍无效，我一直在Chrome控制台中收到此错误

Uncaught ReferenceError: searchTerms is not defined(…)

更新控制器

'use strict';

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

    var vm = this;
    var searchTerms = searchTerms;
    vm.searchTerms = searchTerms;

      vm.noResults = false;
      vm.isSearching = false;

    vm.results = {
      searchTerms: null,
      documentCount: null,
      documents: [],
      queryTime : null,
      searchTermGrams: null,
      itemsPerPage: 10,
      maxResults: 100
    };

      //autocomplete
    vm.autocomplete = {
        suggestions: [],
        corrections: []
    };
    vm.showAutocomplete = false;

Answer 1

controller: 'HomeCtrl as home'将与ui-router一起使用。

编辑：

您还需要在将任何对象/变量分配给vm之前或之前定义和初始化它们。在更新的代码中，您已定义searchTerms但未初始化。假设searchTerms是一个字符串，请参阅以下内容以了解纠正此问题的可能方法。

var searchTerms = '';

var vm = this;
vm.searchTerms = searchTerms;

或根据您的使用需求，只有在未定义的情况下才能进行初始化：

var searchTerms = searchTerms || '';

var vm = this;
vm.searchTerms = searchTerms;

或者如果您不需要单独的内部变量，您可以直接初始化vm.searchTerms（但在大多数情况下，我个人不喜欢这种方法）：

var vm = this;
vm.searchTerms = '';

对于其余的已发布代码，您通常应该只向您的视图展示您需要从那里访问的内容，并将其余部分包含在您的控制器（或服务/工厂等）中。

到目前为止，我还没有找到一套坚固，单一的棱角分明的最佳实践，但是John Papa的Angular Style Guide是一个很好的起点。

实现控制器的最佳实践方法使用UI路由器

1 个答案: