@@ -30,25 +30,15 @@ function GreetingCtrl($scope) {
30
30
31
31
The `GreetingCtrl` controller creates a `greeting` model which can be referred to in a template.
32
32
33
- When a controller function is applied to an angular scope object, the `this` of the controller
34
- function becomes the scope of the angular scope object, so any assignment to `this` within the
35
- controller function happens on the angular scope object.
36
-
37
33
# Adding Behavior to a Scope Object
38
34
39
35
Behavior on an angular scope object is in the form of scope method properties available to the
40
36
template/view. This behavior interacts with and modifies the application model.
41
37
42
38
As discussed in the {@link dev_guide.mvc.understanding_model Model} section of this guide, any
43
39
objects (or primitives) assigned to the scope become model properties. Any functions assigned to
44
- the scope, along with any prototype methods of the controller type, become functions available in
45
- the template/view, and can be invoked via angular expressions and `ng` event handler directives
46
- (e.g. {@link api/angular.module.ng.$compileProvider.directive.ngClick ngClick}). These controller
47
- methods are always evaluated within the context of the angular scope object that the controller
48
- function was applied to (which means that the `this` keyword of any controller method is always
49
- bound to the scope that the controller augments). This is how the second task of adding behavior to
50
- the scope is accomplished.
51
-
40
+ the scope are available in the template/view, and can be invoked via angular expressions
41
+ and `ng` event handler directives (e.g. {@link api/angular.module.ng.$compileProvider.directive.ngClick ngClick}).
52
42
53
43
# Using Controllers Correctly
54
44
@@ -109,13 +99,14 @@ string "very". Depending on which button is clicked, the `spice` model is set to
109
99
function SpicyCtrl($scope) {
110
100
$scope.spice = 'very';
111
101
$scope.chiliSpicy = function() {
112
- this.spice = 'chili';
102
+ $scope.spice = 'chili';
103
+ }
104
+ $scope.jalapenoSpicy = function() {
105
+ $scope.spice = 'jalapeño';
113
106
}
114
107
}
115
108
116
- SpicyCtrl.prototype.jalapenoSpicy = function() {
117
- this.spice = 'jalapeño';
118
- }
109
+
119
110
</pre>
120
111
121
112
Things to notice in the example above:
@@ -124,13 +115,18 @@ Things to notice in the example above:
124
115
scope is augmented (managed) by the `SpicyCtrl` controller.
125
116
- `SpicyCtrl` is just a plain JavaScript function. As an (optional) naming convention the name
126
117
starts with capital letter and ends with "Ctrl" or "Controller".
127
- - The JavaScript keyword `this` in the `SpicyCtrl` function is bound to the scope that the
128
- controller augments.
129
- - Assigning a property to `this` creates or updates the model.
130
- - Controller methods can be created through direct assignment to scope (the `chiliSpicy` method) or
131
- as prototype methods of the controller constructor function(the `jalapenoSpicy` method)
118
+ - Assigning a property to `$scope` creates or updates the model.
119
+ - Controller methods can be created through direct assignment to scope (the `chiliSpicy` method)
132
120
- Both controller methods are available in the template (for the `body` element and and its
133
121
children).
122
+ - NB: Previous versions of Angular (pre 1.0 RC) allowed you to use `this` interchangeably with
123
+ the $scope method, but this is no longer the case. Inside of methods defined on the scope
124
+ `this` and $scope are interchangeable (angular sets `this` to $scope), but not otherwise
125
+ inside your controller constructor.
126
+ - NB: Previous versions of Angular (pre 1.0 RC) added prototype methods into the scope
127
+ automatically, but this is no longer the case; all methods need to be added manually to
128
+ the scope.
129
+
134
130
135
131
Controller methods can also take arguments, as demonstrated in the following variation of the
136
132
previous example.
@@ -148,7 +144,7 @@ previous example.
148
144
function SpicyCtrl($scope) {
149
145
$scope.spice = 'very';
150
146
$scope.spicy = function(spice) {
151
- this .spice = spice;
147
+ $scope .spice = spice;
152
148
}
153
149
}
154
150
</pre>
0 commit comments