?
? ????? PHP ??? ???? ??? ?? ??
ngController
指令給視圖添加一個(gè)控制器。這是angular支持基于“視圖-模型-控制器”設(shè)計(jì)模式原則的主要方面。
Angular中的MVC組件有:
ngController
指令聲明一個(gè)控制器類;該類包含了業(yè)務(wù)邏輯,在應(yīng)用后臺(tái)使用函數(shù)和值來操控域中的屬性。注意,你也能使用$route服務(wù)定義一個(gè)路由來將控制器附加到DOM上。一個(gè)常見錯(cuò)誤是在模板上再次使用ng-controller
定義一個(gè)控制器。這將引起控制器被附加和執(zhí)行兩次。
<ANY
ng-controller="">
...
</ANY>
參數(shù) | 類型 | 詳述 |
---|---|---|
ngController | expression | 一個(gè)全局構(gòu)造函數(shù),或是當(dāng)前域的一個(gè)表達(dá)式,執(zhí)行后得到一個(gè)構(gòu)造函數(shù)。控制器實(shí)例能夠發(fā)布到域?qū)傩陨?,通過 |
這是一個(gè)編輯用戶聯(lián)系信息的簡單表單。添加、刪除、清除和歡迎方法定義在控制器中。這些方法能很方便的從angular標(biāo)記被調(diào)用。任何數(shù)據(jù)的改變都會(huì)自動(dòng)反應(yīng)到視圖,而不需要手動(dòng)更新。
下面是兩種不同的定義風(fēng)格:
this
來綁定方面和屬性: ng-controller="SettingsController1 as settings"
$scope
: ng-controller="SettingsController2"
第二個(gè)形式在 Angular社區(qū)中是最常使用的方法,它常用在示例和本指南中。然而,直接綁定屬性到控制器也有它們的優(yōu)勢(shì)和適用范圍。
controller as
能夠明確在模板中使用哪一個(gè)控制器來存取,當(dāng)您有多個(gè)控制器適用于一個(gè)元素時(shí)。.
,你不必?fù)?dān)心原型繼承覆蓋本體。下面的例子演示使用 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');});