最佳实践方式来实现位指示作为使用路由器的用户界面 [英] Best practice way to implement contoller As using UI Router

问题描述

在使用AngularJS和Elasticsearch一个小的搜索应用程序。想我的应用程序使用 $范围到控制器语法转换。我使用的UI路由器为我的路线/状态。一直在尝试用

 控制器：'HomeCtrl'，
controllerAs：家
 

在我州的声明。然后 VAR VM =这一点; 在控制器绑定到范围

我换 NG-模式=searchTerms我的搜索输入 NG-模式=home.searchTerms和其他地方将需要绑定。它的工作原理没有？

是它更好地使用 NG-控制器=HomeCtrl如家在父分区？那是最好的做法？它将与UI路由器工作？

更新
我现在有

  VAR VM =这一点;
vm.searchTerms = searchTerms;
 

但它仍然无法正常工作，我一直在Chrome控制台收到此错误

 未捕获的Ref​​erenceError：searchTerms没有定义（...）
 

已更新控制器

 使用严格的;angular.module（searchApp.autocomplete，[]）
  .controller（'HomeCtrl'，['$ SCE，$州'，'$ stateParams'，'searchService'，函数（$ SCE，$状态，$ stateParams，searchService）{    VAR VM =这一点;
    VAR searchTerms = searchTerms;
    vm.searchTerms = searchTerms;      vm.noResults = FALSE;
      vm.isSearching = FALSE;    vm.results = {
      sea​​rchTerms：空，
      documentCount：空，
      文件：[]，
      queryTime：空，
      sea​​rchTermGrams：空，
      itemsPerPage：10，
      的maxResults：100
    };      //自动完成
    vm.autocomplete = {
        建议：[]，
        更正：[]
    };
    vm.showAutocomplete = FALSE;
 

解决方案

控制器：'HomeCtrl如家将与UI的路由器工作。
搜索结果
编辑：
搜索结果
您还需要之前定义和初始化的任何对象/变量或同时将其分配给 VM 。在更新后的code，你已经定义 searchTerms ，但它未初始化。请参阅可能的方式来纠正下面这段假设 searchTerms 是一个字符串。

  VAR searchTerms ='';VAR VM =这一点;
vm.searchTerms = searchTerms;
 

或者根据您的使用需求，如果没有定义，你只能初始化：

  VAR searchTerms = searchTerms || '';VAR VM =这一点;
vm.searchTerms = searchTerms;
 

如果你没有需要有一个单独的内部变量，可以初始化 vm.searchTerms 直接（但是在大多数情况下，我个人并不preFER此方法）：

  VAR VM =这一点;
vm.searchTerms ='';
 

关于公布code的休息，你通常应该暴露你的看法，你需要从那里访问，并保持你的包含控制器（或服务/工厂等）内剩下的只有什么。
搜索结果
到目前为止，我还没有碰到一个固体，奇异一套角的最佳实践，但一个伟大的地方开始是约翰爸爸的的角风格指南。

Have a small search app using AngularJS and Elasticsearch. Trying to convert my the app from using $scope to controller As syntax. I'm using UI Router for my routes/states. Been trying to use

controller: 'HomeCtrl',
controllerAs: 'home'

in my state declarations. And then var vm = this; in controller to bind to the scope.

I switched ng-model="searchTerms" on my search input to ng-model="home.searchTerms" and everywhere else bindings would be needed. None of it works?

Is it better to use ng-controller="HomeCtrl as home" in a parent div? Is that best practice? Will it work with UI Router?

UPDATE I now have

var vm = this;
vm.searchTerms = searchTerms;

BUT it still does not work, I keep getting this error in Chrome console

Uncaught ReferenceError: searchTerms is not defined(…)

UPDATED CONTROLLER

'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' will work with ui-router.

EDIT:

You also need to define and initialize any objects/variables before or while assigning them to vm. In your updated code, you have defined searchTerms but it is not initialized. Please see the following for possible ways to rectify this assuming searchTerms is a string.

var searchTerms = '';

var vm = this;
vm.searchTerms = searchTerms;

or depending on your usage needs, you can only initialize if it is undefined:

var searchTerms = searchTerms || '';

var vm = this;
vm.searchTerms = searchTerms;

or if you don't need to have a separate internal variable, you can init vm.searchTerms directly (however in most cases I personally do not prefer this method):

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

Regarding the rest of the posted code, you should generally expose to your view only what you need to access from there and keep the rest contained within your controller (or service/factory, etc.).

So far I have yet to come across a solid, singular set of best practices for angular, however a great place to start is John Papa's Angular Style Guide.

这篇关于最佳实践方式来实现位指示作为使用路由器的用户界面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！