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

Best practice way to implement contoller As using UI Router

本文关键字：最佳 方法 UI 路由器 实现 控制器 使用      更新时间：2023-09-26

拥有一个使用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;

controller: 'HomeCtrl as home'将与ui路由器一起工作。

编辑：

您还需要在将任何对象/变量分配给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。

相关文章：