实现控制器的最佳实践方式 As using UI Router

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 = '';

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

到目前为止，我还没有遇到过一套可靠、单一的 Angular 最佳实践，但是 John Papa 的 Angular Style Guide 是一个很好的起点。