AngularJS: API: ng/directive/ngController

ngController

- directive in module ng

ngController指令给视图添加一个控制器。这是angular支持基于“视图-模型-控制器”设计模式原则的主要方面。

Angular中的MVC组件有：

模型 — 模型是一个域的属性集合；域被附加到DOM上，通过绑定来存取域属性。
视图 — 模板(进行数据绑定的HTML)会被呈现到视图中。
控制器 — ngController指令声明一个控制器类；该类包含了业务逻辑，在应用后台使用函数和值来操控域中的属性。

注意，你也能使用$route服务定义一个路由来将控制器附加到DOM上。一个常见错误是在模板上再次使用ng-controller定义一个控制器。这将引起控制器被附加和执行两次。

指令信息

这个指令会创建新的作用域(scope)。
这个指令执行优先级为0.

用法

作为属性使用:
```
<ANY
  ng-controller="">
...
</ANY>
```

参数

参数	类型	详述
ngController	expression	一个全局构造函数，或是当前域的一个表达式，执行后得到一个构造函数。控制器实例能够发布到域属性上，通过`as propertyName`指定一个属性名。

示例

这是一个编辑用户联系信息的简单表单。添加、删除、清除和欢迎方法定义在控制器中。这些方法能很方便的从angular标记被调用。任何数据的改变都会自动反应到视图，而不需要手动更新。

下面是两种不同的定义风格：

直接在控制器上使用 this来绑定方面和属性: ng-controller="SettingsController1 as settings"
在控制器里注入$scope: ng-controller="SettingsController2"

第二个形式在 Angular社区中是最常使用的方法，它常用在示例和本指南中。然而，直接绑定属性到控制器也有它们的优势和适用范围。

使用controller as 能够明确在模板中使用哪一个控制器来存取，当您有多个控制器适用于一个元素时。
如果你正在作为类来写你的控制器，你可以更轻松地访问属性与方法，控制器代码内不用关心是否会应用在域上。
因为绑定时总是有一个 . ，你不必担心原型继承覆盖本体。

下面的例子演示使用 controller as 的语法。

index.html

<div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
  Name: <input Type="text" ng-model="settings.name"/>
  [ <a href="" ng-click="settings.greet()">greet</a> ]<br/>
  Contact:
  <ul>
    <li ng-repeat="contact in settings.contacts">
      <select ng-model="contact.type">
         <option>phone</option>
         <option>email</option>
      </select>
      <input Type="text" ng-model="contact.value"/>
      [ <a href="" ng-click="settings.clearContact(contact)">clear</a>
      | <a href="" ng-click="settings.removeContact(contact)">X</a> ]
    </li>
    <li>[ <a href="" ng-click="settings.addContact()">add</a> ]</li>
 </ul>
</div>

app.js

angular.module('controllerAsExample', [])
  .controller('SettingsController1', SettingsController1);

Function SettingsController1() {
  this.名称= "John Smith";
  this.contacts = [
    {Type: 'phone', value: '408 555 1212'},
    {Type: 'email', value: 'john.smith@example.org'} ];}

SettingsController1.prototype.greet = Function() {
  alert(this.名称);};

SettingsController1.prototype.addContact = Function() {
  this.contacts.push({Type: 'email', value: 'yourname@example.org'});};

SettingsController1.prototype.removeContact = Function(contactToRemove) {
 var index = this.contacts.indexOf(contactToRemove);
  this.contacts.splice(index, 1);};

SettingsController1.prototype.clearContact = Function(contact) {
  contact.Type= 'phone';
  contact.value = '';};

protractor.js

it('should check controller as', Function() {
  var container = element(by.id('ctrl-as-exmpl'));
    expect(container.element(by.model('settings.name'))
      .getAttribute('value')).toBe('John Smith');

  var firstRepeat =
      container.element(by.repeater('contact in settings.contacts').row(0));
  var secondRepeat =
      container.element(by.repeater('contact in settings.contacts').row(1));

  expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('408 555 1212');

  expect(secondRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('john.smith@example.org');

  firstRepeat.element(by.linkText('clear')).click();

  expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('');

  container.element(by.linkText('add')).click();

  expect(container.element(by.repeater('contact in settings.contacts').row(2))
      .element(by.model('contact.value'))
      .getAttribute('value'))
      .toBe('yourname@example.org');});

下面的例子演示“注入$scope”到控制器的方式：

index.html

<div id="ctrl-exmpl" ng-controller="SettingsController2">
  Name: <input Type="text" ng-model="name"/>
  [ <a href="" ng-click="greet()">greet</a> ]<br/>
  Contact:
  <ul>
    <li ng-repeat="contact in contacts">
      <select ng-model="contact.type">
         <option>phone</option>
         <option>email</option>
      </select>
      <input Type="text" ng-model="contact.value"/>
      [ <a href="" ng-click="clearContact(contact)">clear</a>
      | <a href="" ng-click="removeContact(contact)">X</a> ]
    </li>
    <li>[ <a href="" ng-click="addContact()">add</a> ]</li>
 </ul>
</div>

app.js

angular.module('controllerExample', [])
  .controller('SettingsController2', ['$scope', SettingsController2]);

Function SettingsController2($scope) {
  $scope.name= "John Smith";
  $scope.contacts = [
    {Type:'phone', value:'408 555 1212'},
    {Type:'email', value:'john.smith@example.org'} ];

  $scope.greet = Function() {
    alert($scope.name);
  };

  $scope.addContact = Function() {
    $scope.contacts.push({Type:'email', value:'yourname@example.org'});
  };

  $scope.removeContact = Function(contactToRemove) {
    var index = $scope.contacts.indexOf(contactToRemove);
    $scope.contacts.splice(index, 1);
  };

  $scope.clearContact = Function(contact) {
    contact.Type= 'phone';
    contact.value = '';
  };}

protractor.js

it('should check controller', Function() {
  var container = element(by.id('ctrl-exmpl'));

  expect(container.element(by.model('name'))
      .getAttribute('value')).toBe('John Smith');

  var firstRepeat =
      container.element(by.repeater('contact in contacts').row(0));
  var secondRepeat =
      container.element(by.repeater('contact in contacts').row(1));

  expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('408 555 1212');
  expect(secondRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('john.smith@example.org');

  firstRepeat.element(by.linkText('clear')).click();

  expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('');

  container.element(by.linkText('add')).click();

  expect(container.element(by.repeater('contact in contacts').row(2))
      .element(by.model('contact.value'))
      .getAttribute('value'))
      .toBe('yourname@example.org');});