diff options
| author | Misko Hevery | 2012-06-06 15:54:40 -0700 |
|---|---|---|
| committer | Misko Hevery | 2013-04-22 23:28:41 -0700 |
| commit | cd38cbf975b501d846e6149d1d993972a1af0053 (patch) | |
| tree | 3857a2879f782c6b7f1350fcd5c8d52e082fd160 /src/ng/directive/ngController.js | |
| parent | 021bdf3922b6525bd117e59fb4945b30a5a55341 (diff) | |
| download | angular.js-cd38cbf975b501d846e6149d1d993972a1af0053.tar.bz2 | |
feat(controller): support as instance syntax
Support ng-controller="MyController as my" syntax
which publishes the controller instance to the
current scope.
Also supports exporting a controller defined with route:
````javascript
angular.module('routes', [], function($routeProvider) {
$routeProvider.when('/home', {controller: 'Ctrl as home', templateUrl: '...'});
});
````
Diffstat (limited to 'src/ng/directive/ngController.js')
| -rw-r--r-- | src/ng/directive/ngController.js | 73 |
1 files changed, 71 insertions, 2 deletions
diff --git a/src/ng/directive/ngController.js b/src/ng/directive/ngController.js index 438a0d87..be2f149f 100644 --- a/src/ng/directive/ngController.js +++ b/src/ng/directive/ngController.js @@ -21,7 +21,8 @@ * @scope * @param {expression} ngController Name of a globally accessible constructor function or an * {@link guide/expression expression} that on the current scope evaluates to a - * constructor function. + * constructor function. The controller instance can further be published into the scope + * by adding `as localName` the controller name attribute. * * @example * Here is a simple form for editing user contact information. Adding, removing, clearing, and @@ -29,10 +30,77 @@ * easily be called from the angular markup. Notice that the scope becomes the `this` for the * controller's instance. This allows for easy access to the view data from the controller. Also * notice that any changes to the data are automatically reflected in the View without the need - * for a manual update. + * for a manual update. The example is included in two different declaration styles based on + * your style preferences. <doc:example> <doc:source> <script> + function SettingsController() { + this.name = "John Smith"; + this.contacts = [ + {type: 'phone', value: '408 555 1212'}, + {type: 'email', value: 'john.smith@example.org'} ]; + }; + + SettingsController.prototype.greet = function() { + alert(this.name); + }; + + SettingsController.prototype.addContact = function() { + this.contacts.push({type: 'email', value: 'yourname@example.org'}); + }; + + SettingsController.prototype.removeContact = function(contactToRemove) { + var index = this.contacts.indexOf(contactToRemove); + this.contacts.splice(index, 1); + }; + + SettingsController.prototype.clearContact = function(contact) { + contact.type = 'phone'; + contact.value = ''; + }; + </script> + <div ng-controller="SettingsController 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> + </doc:source> + <doc:scenario> + it('should check controller', function() { + expect(element('.doc-example-live div>:input').val()).toBe('John Smith'); + expect(element('.doc-example-live li:nth-child(1) input').val()) + .toBe('408 555 1212'); + expect(element('.doc-example-live li:nth-child(2) input').val()) + .toBe('john.smith@example.org'); + + element('.doc-example-live li:first a:contains("clear")').click(); + expect(element('.doc-example-live li:first input').val()).toBe(''); + + element('.doc-example-live li:last a:contains("add")').click(); + expect(element('.doc-example-live li:nth-child(3) input').val()) + .toBe('yourname@example.org'); + }); + </doc:scenario> + </doc:example> + + + + <doc:example> + <doc:source> + <script> function SettingsController($scope) { $scope.name = "John Smith"; $scope.contacts = [ @@ -93,6 +161,7 @@ }); </doc:scenario> </doc:example> + */ var ngControllerDirective = [function() { return { |
