©
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan
ngController指令给视图添加一个控制器。这是angular支持基于“视图-模型-控制器”设计模式原则的主要方面。
Angular中的MVC组件有：
ngController指令声明一个控制器类；该类包含了业务逻辑，在应用后台使用函数和值来操控域中的属性。注意，你也能使用$route服务定义一个路由来将控制器附加到DOM上。一个常见错误是在模板上再次使用ng-controller定义一个控制器。这将引起控制器被附加和执行两次。
<ANY
ng-controller="">
...
</ANY>| 参数 | 类型 | 详述 |
|---|---|---|
| ngController | expression | 一个全局构造函数，或是当前域的一个表达式，执行后得到一个构造函数。控制器实例能够发布到域属性上，通过 |
这是一个编辑用户联系信息的简单表单。添加、删除、清除和欢迎方法定义在控制器中。这些方法能很方便的从angular标记被调用。任何数据的改变都会自动反应到视图，而不需要手动更新。
下面是两种不同的定义风格：
this来绑定方面和属性: ng-controller="SettingsController1 as settings"
$scope: ng-controller="SettingsController2"
第二个形式在 Angular社区中是最常使用的方法，它常用在示例和本指南中。然而，直接绑定属性到控制器也有它们的优势和适用范围。
controller as 能够明确在模板中使用哪一个控制器来存取，当您有多个控制器适用于一个元素时。. ，你不必担心原型继承覆盖本体。下面的例子演示使用 controller as 的语法。
<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>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 = '';};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”到控制器的方式：<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>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 = '';
};}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');});