aboutsummaryrefslogtreecommitdiffstats
path: root/src/ng/directive
diff options
context:
space:
mode:
Diffstat (limited to 'src/ng/directive')
-rw-r--r--src/ng/directive/ngController.js73
-rw-r--r--src/ng/directive/ngView.js51
2 files changed, 99 insertions, 25 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 {
diff --git a/src/ng/directive/ngView.js b/src/ng/directive/ngView.js
index 5b6d938b..8d7c87c5 100644
--- a/src/ng/directive/ngView.js
+++ b/src/ng/directive/ngView.js
@@ -23,7 +23,7 @@
* @example
<example module="ngView" animations="true">
<file name="index.html">
- <div ng-controller="MainCntl">
+ <div ng-controller="MainCntl as main">
Choose:
<a href="Book/Moby">Moby</a> |
<a href="Book/Moby/ch/1">Moby: Ch1</a> |
@@ -37,26 +37,26 @@
ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
<hr />
- <pre>$location.path() = {{$location.path()}}</pre>
- <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
- <pre>$route.current.params = {{$route.current.params}}</pre>
- <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
- <pre>$routeParams = {{$routeParams}}</pre>
+ <pre>$location.path() = {{main.$location.path()}}</pre>
+ <pre>$route.current.templateUrl = {{main.$route.current.templateUrl}}</pre>
+ <pre>$route.current.params = {{main.$route.current.params}}</pre>
+ <pre>$route.current.scope.name = {{main.$route.current.scope.name}}</pre>
+ <pre>$routeParams = {{main.$routeParams}}</pre>
</div>
</file>
<file name="book.html">
<div>
- controller: {{name}}<br />
- Book Id: {{params.bookId}}<br />
+ controller: {{book.name}}<br />
+ Book Id: {{book.params.bookId}}<br />
</div>
</file>
<file name="chapter.html">
<div>
- controller: {{name}}<br />
- Book Id: {{params.bookId}}<br />
- Chapter Id: {{params.chapterId}}
+ controller: {{chapter.name}}<br />
+ Book Id: {{chapter.params.bookId}}<br />
+ Chapter Id: {{chapter.params.chapterId}}
</div>
</file>
@@ -104,31 +104,33 @@
angular.module('ngView', [], function($routeProvider, $locationProvider) {
$routeProvider.when('/Book/:bookId', {
templateUrl: 'book.html',
- controller: BookCntl
+ controller: BookCntl,
+ controllerAlias: 'book'
});
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
- controller: ChapterCntl
+ controller: ChapterCntl,
+ controllerAlias: 'chapter'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
- function MainCntl($scope, $route, $routeParams, $location) {
- $scope.$route = $route;
- $scope.$location = $location;
- $scope.$routeParams = $routeParams;
+ function MainCntl($route, $routeParams, $location) {
+ this.$route = $route;
+ this.$location = $location;
+ this.$routeParams = $routeParams;
}
- function BookCntl($scope, $routeParams) {
- $scope.name = "BookCntl";
- $scope.params = $routeParams;
+ function BookCntl($routeParams) {
+ this.name = "BookCntl";
+ this.params = $routeParams;
}
- function ChapterCntl($scope, $routeParams) {
- $scope.name = "ChapterCntl";
- $scope.params = $routeParams;
+ function ChapterCntl($routeParams) {
+ this.name = "ChapterCntl";
+ this.params = $routeParams;
}
</file>
@@ -202,6 +204,9 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c
if (current.controller) {
locals.$scope = lastScope;
controller = $controller(current.controller, locals);
+ if (current.controllerAlias) {
+ lastScope[current.controllerAlias] = controller;
+ }
element.children().data('$ngControllerController', controller);
}