Question

我用谷歌搜索但我没有找到适合我的问题的答案，我是angularJS的新手我正在研究我的angularJS教程。

我有这个angularJS行：

.state('index',{
url:"/",
templateUrl:"views/index.html",
controller:"IndexCtrl",
controllerAs:"index"
})

使用 controllerAs 属性的原因是什么？

Answer 1

少数事情：

<强> 1。缩小范围使用

您可以简单地使用this加载所需的所有内容，而不是加载控制器范围内的每个数据。

例如：

路线

state('index',{
    url:"/",
    templateUrl:"views/index.html",
    controller:"ListCtrl",
    controllerAs:"list"
})

在控制器

中

angular.module('feed').controller('ListCtrl', function($scope, reddit){
    var vm   = this;
    vm.names = ["Michael", "Roy"];

});

在模板中：

<ul>
    <li ng-repeat="name in list.names">
        <div>{{name}}</div>
    </li>
</ul>

<强> 2。正确使用范围

当多个控制器发挥作用时，范围变得棘手。使用controllerAs方法将有很长的路要走。示例如下所示：

错：

<span>Outside Controller: Your name is: {{username}}</span>
<div ng-controller="SignupController">
    <span>Inside Controller: Your name is: {{username}}</span>
    <fieldset legend="User details">
        <input ng-model="username">
    </fieldset>
</div>

正确：

<span>Outside Controller: Your name is: {{user.name}}</span>
<div ng-controller="SignupController">
    <span>Inside Controller: Your name is: {{user.name}}</span>
    <fieldset legend="User details">
        <input ng-model="user.name">
    </fieldset>
</div>

找到使图像更清晰的图像：

礼貌：AngularJs "controller as" syntax - clarification?

Answer 2

是。更多信息：

在controllerAs之前，语法，方法和属性需要通过将它们绑定到$ scope来公开。使用controllerAs，您的控制器实例将作为您选择的属性绑定到$ scope。

这样您就可以为控制器使用Plain Old JavaScript Classes。

这是一种更清洁的开发方法。编辑：使Angular如此容易编写测试的一个原因是您的控制器和组件不需要从框架基类继承。见Backbone和Ember。

因此，使用旧式控制器看起来像（为简单起见，在ES6中）：

YourController.$inject = ['$scope'];
class YourController {

    constructor($scope) {

        $scope.myMethod = () => { . . . };

        $scope.myProperty = true;
    }
}

使用controllerAs

class YourController {

    constructor() {

        this.myProperty = true;
    }

    myMethod() { . . . };
}

只是一个普通的老班，而不是装饰或monkeypatching $范围。

Answer 3

也许你没有用Google搜索过！

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

正如名称“controllerAs”告诉我们的那样，控制器是别名，您可以使用该别名访问控制器。

Answer 4

您可以通过以下方式设置控制器：

$stateProvider.state('contacts', {
  template: '<h1>{{title}}</h1>',
  controller: function($scope){
    $scope.title = 'My Contacts';
  }
})

或者，如果您已在模块上定义了控制器，请执行以下操作：

$stateProvider.state('contacts', {
  template: ...,
  controller: 'ContactsCtrl'
})

或者使用controllerAs语法，上面变为：

$stateProvider.state('contacts', {
  template: '<h1>{{contact.title}}</h1>',
  controller: function(){
    this.title = 'My Contacts';
  },
  controllerAs: 'contact'
})

和

$stateProvider.state('contacts', {
  template: ...,
  controller: 'ContactsCtrl as contact'
})

或者对于更高级的需求，您可以使用controllerProvider为您动态返回控制器函数或字符串：

$stateProvider.state('contacts', {
  template: ...,
  controllerProvider: function($stateParams) {
      var ctrlName = $stateParams.type + "Controller";
      return ctrlName;
  }
})

来源：https://github.com/angular-ui/ui-router/wiki#controllers

简单地说，当我们使用嵌套控制器时， Controller as 语法会有所帮助。命名范围是明确定义的，因此控制器之间不会有冲突，因为您必须说明在点之前引用的控制器。

<div ng-controller="Shell as shellVm">
  <h1>{{shellVm.title}}</h1>
  <article ng-controller="Customers as customersVm">
    <h2>{{customersVm.title}} in {{shellVm.title}}</h2>
    <ul ng-repeat="c in customersVm.customers">
      <li>{{c.name}}</li>
    </ul>
  </article>
</div>

同时参考AngularJs "controller as" syntax - clarification?。

可能是什么原因使用＆＃34; controllerAs＆＃34;属性？

4 个答案: