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

有一个使用AngularJS和Elasticsearch的小搜索应用程序。正在尝试将我的应用程序从使用

$scope

转换为

控制器作为

语法。我正在为我的路由/状态使用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;

控制器：“HomeCtrl作为主页”
将与ui路由器一起使用。



编辑：



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

var searchTerms = '';

var vm = this;
vm.searchTerms = searchTerms;

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

var searchTerms = searchTerms || '';

var vm = this;
vm.searchTerms = searchTerms;

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

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



到目前为止，我还没有找到一套可靠、独特的angular最佳实践，但是John Papa是一个很好的起点。
您是否正在通过
vm
使
搜索词可见？例如，在控制器中，您是否有类似以下语句：
vm.searchTerms=searchTerms
？@ankur对于延迟表示抱歉，我不得不出去一会儿，让我检查一下我的code@ankur请看上面的更新，你能发布你的控制器吗？如果在将searchTerms分配给别名后定义了它，它可能会抛出该错误。
searchTerms
未初始化。我想是一根绳子吧？我正在更新我的答案以反映这一点。此外，是否所有对象都需要在控制器外部可见？如果没有，您可以删除
虚拟机。
。谢谢，我用这个项目来学习Angular，至少可以说这是一次冒险！很高兴能为您提供帮助。：）
var vm = this;
vm.searchTerms = '';