mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-28 21:05:43 +08:00
docs(ngController): add formatting to controller as description and example
Adds to #7591
This commit is contained in:
Peter Bacon Darwin
@@ -34,168 +34,183 @@
|
|||||||
* easily be called from the angular markup. Any changes to the data are automatically reflected
|
* easily be called from the angular markup. Any changes to the data are automatically reflected
|
||||||
* in the View without the need for a manual update.
|
* in the View without the need for a manual update.
|
||||||
*
|
*
|
||||||
* Two different declaration styles are included below: one which injects `scope` into the
|
* Two different declaration styles are included below:
|
||||||
* controller, and another which instead binds methods and properties directly onto the controller
|
*
|
||||||
* using `this`. The first option is more common in the Angular community, and is generally used
|
* * one binds methods and properties directly onto the controller using `this`:
|
||||||
* in boilerplates and in this guide. However, there are advantages to binding properties directly
|
* `ng-controller="SettingsController1 as settings"`
|
||||||
* to the controller and avoiding scope. Using `controller as` makes it obvious which controller
|
* * one injects `$scope` into the controller:
|
||||||
* you are accessing in the template when multiple controllers apply to an element. Since there
|
* `ng-controller="SettingsController2"`
|
||||||
* is always a `.` in the bindings, you don't have to worry about prototypal inheritance masking
|
*
|
||||||
* primitives.
|
* The second option is more common in the Angular community, and is generally used in boilerplates
|
||||||
<example>
|
* and in this guide. However, there are advantages to binding properties directly to the controller
|
||||||
<file name="index.html">
|
* and avoiding scope.
|
||||||
<script>
|
*
|
||||||
function SettingsController1() {
|
* * Using `controller as` makes it obvious which controller you are accessing in the template when
|
||||||
this.name = "John Smith";
|
* multiple controllers apply to an element.
|
||||||
this.contacts = [
|
* * If you are writing your controllers as classes you have easier access to the properties and
|
||||||
{type: 'phone', value: '408 555 1212'},
|
* methods, which will appear on the scope, from inside the controller code.
|
||||||
{type: 'email', value: 'john.smith@example.org'} ];
|
* * Since there is always a `.` in the bindings, you don't have to worry about prototypal
|
||||||
};
|
* inheritance masking primitives.
|
||||||
|
*
|
||||||
SettingsController1.prototype.greet = function() {
|
* This example demonstrates the `controller as` syntax.
|
||||||
alert(this.name);
|
*
|
||||||
};
|
* <example name="ngControllerAs">
|
||||||
|
* <file name="index.html">
|
||||||
SettingsController1.prototype.addContact = function() {
|
* <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
|
||||||
this.contacts.push({type: 'email', value: 'yourname@example.org'});
|
* Name: <input type="text" ng-model="settings.name"/>
|
||||||
};
|
* [ <a href="" ng-click="settings.greet()">greet</a> ]<br/>
|
||||||
|
* Contact:
|
||||||
SettingsController1.prototype.removeContact = function(contactToRemove) {
|
* <ul>
|
||||||
var index = this.contacts.indexOf(contactToRemove);
|
* <li ng-repeat="contact in settings.contacts">
|
||||||
this.contacts.splice(index, 1);
|
* <select ng-model="contact.type">
|
||||||
};
|
* <option>phone</option>
|
||||||
|
* <option>email</option>
|
||||||
SettingsController1.prototype.clearContact = function(contact) {
|
* </select>
|
||||||
contact.type = 'phone';
|
* <input type="text" ng-model="contact.value"/>
|
||||||
contact.value = '';
|
* [ <a href="" ng-click="settings.clearContact(contact)">clear</a>
|
||||||
};
|
* | <a href="" ng-click="settings.removeContact(contact)">X</a> ]
|
||||||
</script>
|
* </li>
|
||||||
<div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
|
* <li>[ <a href="" ng-click="settings.addContact()">add</a> ]</li>
|
||||||
Name: <input type="text" ng-model="settings.name"/>
|
* </ul>
|
||||||
[ <a href="" ng-click="settings.greet()">greet</a> ]<br/>
|
* </div>
|
||||||
Contact:
|
* </file>
|
||||||
<ul>
|
* <file name="app.js">
|
||||||
<li ng-repeat="contact in settings.contacts">
|
* function SettingsController1() {
|
||||||
<select ng-model="contact.type">
|
* this.name = "John Smith";
|
||||||
<option>phone</option>
|
* this.contacts = [
|
||||||
<option>email</option>
|
* {type: 'phone', value: '408 555 1212'},
|
||||||
</select>
|
* {type: 'email', value: 'john.smith@example.org'} ];
|
||||||
<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> ]
|
* SettingsController1.prototype.greet = function() {
|
||||||
</li>
|
* alert(this.name);
|
||||||
<li>[ <a href="" ng-click="settings.addContact()">add</a> ]</li>
|
* };
|
||||||
</ul>
|
*
|
||||||
</div>
|
* SettingsController1.prototype.addContact = function() {
|
||||||
</file>
|
* this.contacts.push({type: 'email', value: 'yourname@example.org'});
|
||||||
<file name="protractor.js" type="protractor">
|
* };
|
||||||
it('should check controller as', function() {
|
*
|
||||||
var container = element(by.id('ctrl-as-exmpl'));
|
* SettingsController1.prototype.removeContact = function(contactToRemove) {
|
||||||
|
* var index = this.contacts.indexOf(contactToRemove);
|
||||||
expect(container.findElement(by.model('settings.name'))
|
* this.contacts.splice(index, 1);
|
||||||
.getAttribute('value')).toBe('John Smith');
|
* };
|
||||||
|
*
|
||||||
var firstRepeat =
|
* SettingsController1.prototype.clearContact = function(contact) {
|
||||||
container.findElement(by.repeater('contact in settings.contacts').row(0));
|
* contact.type = 'phone';
|
||||||
var secondRepeat =
|
* contact.value = '';
|
||||||
container.findElement(by.repeater('contact in settings.contacts').row(1));
|
* };
|
||||||
|
* </file>
|
||||||
expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
* <file name="protractor.js" type="protractor">
|
||||||
.toBe('408 555 1212');
|
* it('should check controller as', function() {
|
||||||
expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
* var container = element(by.id('ctrl-as-exmpl'));
|
||||||
.toBe('john.smith@example.org');
|
* expect(container.findElement(by.model('settings.name'))
|
||||||
|
* .getAttribute('value')).toBe('John Smith');
|
||||||
firstRepeat.findElement(by.linkText('clear')).click();
|
*
|
||||||
|
* var firstRepeat =
|
||||||
expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
* container.findElement(by.repeater('contact in settings.contacts').row(0));
|
||||||
.toBe('');
|
* var secondRepeat =
|
||||||
|
* container.findElement(by.repeater('contact in settings.contacts').row(1));
|
||||||
container.findElement(by.linkText('add')).click();
|
*
|
||||||
|
* expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
||||||
expect(container.findElement(by.repeater('contact in settings.contacts').row(2))
|
* .toBe('408 555 1212');
|
||||||
.findElement(by.model('contact.value'))
|
*
|
||||||
.getAttribute('value'))
|
* expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
||||||
.toBe('yourname@example.org');
|
* .toBe('john.smith@example.org');
|
||||||
});
|
*
|
||||||
</file>
|
* firstRepeat.findElement(by.linkText('clear')).click();
|
||||||
</example>
|
*
|
||||||
<example>
|
* expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
||||||
<file name="index.html">
|
* .toBe('');
|
||||||
<script>
|
*
|
||||||
function SettingsController2($scope) {
|
* container.findElement(by.linkText('add')).click();
|
||||||
$scope.name = "John Smith";
|
*
|
||||||
$scope.contacts = [
|
* expect(container.findElement(by.repeater('contact in settings.contacts').row(2))
|
||||||
{type:'phone', value:'408 555 1212'},
|
* .findElement(by.model('contact.value'))
|
||||||
{type:'email', value:'john.smith@example.org'} ];
|
* .getAttribute('value'))
|
||||||
|
* .toBe('yourname@example.org');
|
||||||
$scope.greet = function() {
|
* });
|
||||||
alert($scope.name);
|
* </file>
|
||||||
};
|
* </example>
|
||||||
|
*
|
||||||
$scope.addContact = function() {
|
* This example demonstrates the "attach to `$scope`" style of controller.
|
||||||
$scope.contacts.push({type:'email', value:'yourname@example.org'});
|
*
|
||||||
};
|
* <example name="ngController">
|
||||||
|
* <file name="index.html">
|
||||||
$scope.removeContact = function(contactToRemove) {
|
* <div id="ctrl-exmpl" ng-controller="SettingsController2">
|
||||||
var index = $scope.contacts.indexOf(contactToRemove);
|
* Name: <input type="text" ng-model="name"/>
|
||||||
$scope.contacts.splice(index, 1);
|
* [ <a href="" ng-click="greet()">greet</a> ]<br/>
|
||||||
};
|
* Contact:
|
||||||
|
* <ul>
|
||||||
$scope.clearContact = function(contact) {
|
* <li ng-repeat="contact in contacts">
|
||||||
contact.type = 'phone';
|
* <select ng-model="contact.type">
|
||||||
contact.value = '';
|
* <option>phone</option>
|
||||||
};
|
* <option>email</option>
|
||||||
}
|
* </select>
|
||||||
</script>
|
* <input type="text" ng-model="contact.value"/>
|
||||||
<div id="ctrl-exmpl" ng-controller="SettingsController2">
|
* [ <a href="" ng-click="clearContact(contact)">clear</a>
|
||||||
Name: <input type="text" ng-model="name"/>
|
* | <a href="" ng-click="removeContact(contact)">X</a> ]
|
||||||
[ <a href="" ng-click="greet()">greet</a> ]<br/>
|
* </li>
|
||||||
Contact:
|
* <li>[ <a href="" ng-click="addContact()">add</a> ]</li>
|
||||||
<ul>
|
* </ul>
|
||||||
<li ng-repeat="contact in contacts">
|
* </div>
|
||||||
<select ng-model="contact.type">
|
* </file>
|
||||||
<option>phone</option>
|
* <file name="app.js">
|
||||||
<option>email</option>
|
* function SettingsController2($scope) {
|
||||||
</select>
|
* $scope.name = "John Smith";
|
||||||
<input type="text" ng-model="contact.value"/>
|
* $scope.contacts = [
|
||||||
[ <a href="" ng-click="clearContact(contact)">clear</a>
|
* {type:'phone', value:'408 555 1212'},
|
||||||
| <a href="" ng-click="removeContact(contact)">X</a> ]
|
* {type:'email', value:'john.smith@example.org'} ];
|
||||||
</li>
|
*
|
||||||
<li>[ <a href="" ng-click="addContact()">add</a> ]</li>
|
* $scope.greet = function() {
|
||||||
</ul>
|
* alert($scope.name);
|
||||||
</div>
|
* };
|
||||||
</file>
|
*
|
||||||
<file name="protractor.js" type="protractor">
|
* $scope.addContact = function() {
|
||||||
it('should check controller', function() {
|
* $scope.contacts.push({type:'email', value:'yourname@example.org'});
|
||||||
var container = element(by.id('ctrl-exmpl'));
|
* };
|
||||||
|
*
|
||||||
expect(container.findElement(by.model('name'))
|
* $scope.removeContact = function(contactToRemove) {
|
||||||
.getAttribute('value')).toBe('John Smith');
|
* var index = $scope.contacts.indexOf(contactToRemove);
|
||||||
|
* $scope.contacts.splice(index, 1);
|
||||||
var firstRepeat =
|
* };
|
||||||
container.findElement(by.repeater('contact in contacts').row(0));
|
*
|
||||||
var secondRepeat =
|
* $scope.clearContact = function(contact) {
|
||||||
container.findElement(by.repeater('contact in contacts').row(1));
|
* contact.type = 'phone';
|
||||||
|
* contact.value = '';
|
||||||
expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
* };
|
||||||
.toBe('408 555 1212');
|
* }
|
||||||
expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
* </file>
|
||||||
.toBe('john.smith@example.org');
|
* <file name="protractor.js" type="protractor">
|
||||||
|
* it('should check controller', function() {
|
||||||
firstRepeat.findElement(by.linkText('clear')).click();
|
* var container = element(by.id('ctrl-exmpl'));
|
||||||
|
*
|
||||||
expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
* expect(container.findElement(by.model('name'))
|
||||||
.toBe('');
|
* .getAttribute('value')).toBe('John Smith');
|
||||||
|
*
|
||||||
container.findElement(by.linkText('add')).click();
|
* var firstRepeat =
|
||||||
|
* container.findElement(by.repeater('contact in contacts').row(0));
|
||||||
expect(container.findElement(by.repeater('contact in contacts').row(2))
|
* var secondRepeat =
|
||||||
.findElement(by.model('contact.value'))
|
* container.findElement(by.repeater('contact in contacts').row(1));
|
||||||
.getAttribute('value'))
|
*
|
||||||
.toBe('yourname@example.org');
|
* expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
||||||
});
|
* .toBe('408 555 1212');
|
||||||
</file>
|
* expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
||||||
</example>
|
* .toBe('john.smith@example.org');
|
||||||
|
*
|
||||||
|
* firstRepeat.findElement(by.linkText('clear')).click();
|
||||||
|
*
|
||||||
|
* expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
|
||||||
|
* .toBe('');
|
||||||
|
*
|
||||||
|
* container.findElement(by.linkText('add')).click();
|
||||||
|
*
|
||||||
|
* expect(container.findElement(by.repeater('contact in contacts').row(2))
|
||||||
|
* .findElement(by.model('contact.value'))
|
||||||
|
* .getAttribute('value'))
|
||||||
|
* .toBe('yourname@example.org');
|
||||||
|
* });
|
||||||
|
* </file>
|
||||||
|
*</example>
|
||||||
|
|
||||||
*/
|
*/
|
||||||
var ngControllerDirective = [function() {
|
var ngControllerDirective = [function() {
|
||||||
|
|||||||
Reference in New Issue
Block a user