aboutsummaryrefslogtreecommitdiffstats
path: root/src/ng/directive/ngController.js
diff options
context:
space:
mode:
authorMisko Hevery2012-06-06 15:54:40 -0700
committerMisko Hevery2013-04-22 23:28:41 -0700
commitcd38cbf975b501d846e6149d1d993972a1af0053 (patch)
tree3857a2879f782c6b7f1350fcd5c8d52e082fd160 /src/ng/directive/ngController.js
parent021bdf3922b6525bd117e59fb4945b30a5a55341 (diff)
downloadangular.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.js73
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 {