Skip to content

Commit 666f326

Browse files
xrdIgorMinar
authored andcommitted
docs(guide/controllers): update w/ controller scope separation
1 parent 9087859 commit 666f326

File tree

1 file changed

+18
-22
lines changed

1 file changed

+18
-22
lines changed

docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc

+18-22
Original file line numberDiff line numberDiff line change
@@ -30,25 +30,15 @@ function GreetingCtrl($scope) {
3030

3131
The `GreetingCtrl` controller creates a `greeting` model which can be referred to in a template.
3232

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-
3733
# Adding Behavior to a Scope Object
3834

3935
Behavior on an angular scope object is in the form of scope method properties available to the
4036
template/view. This behavior interacts with and modifies the application model.
4137

4238
As discussed in the {@link dev_guide.mvc.understanding_model Model} section of this guide, any
4339
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}).
5242

5343
# Using Controllers Correctly
5444

@@ -109,13 +99,14 @@ string "very". Depending on which button is clicked, the `spice` model is set to
10999
function SpicyCtrl($scope) {
110100
$scope.spice = 'very';
111101
$scope.chiliSpicy = function() {
112-
this.spice = 'chili';
102+
$scope.spice = 'chili';
103+
}
104+
$scope.jalapenoSpicy = function() {
105+
$scope.spice = 'jalapeño';
113106
}
114107
}
115108

116-
SpicyCtrl.prototype.jalapenoSpicy = function() {
117-
this.spice = 'jalapeño';
118-
}
109+
119110
</pre>
120111

121112
Things to notice in the example above:
@@ -124,13 +115,18 @@ Things to notice in the example above:
124115
scope is augmented (managed) by the `SpicyCtrl` controller.
125116
- `SpicyCtrl` is just a plain JavaScript function. As an (optional) naming convention the name
126117
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)
132120
- Both controller methods are available in the template (for the `body` element and and its
133121
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+
134130

135131
Controller methods can also take arguments, as demonstrated in the following variation of the
136132
previous example.
@@ -148,7 +144,7 @@ previous example.
148144
function SpicyCtrl($scope) {
149145
$scope.spice = 'very';
150146
$scope.spicy = function(spice) {
151-
this.spice = spice;
147+
$scope.spice = spice;
152148
}
153149
}
154150
</pre>

0 commit comments

Comments
 (0)