Skip to content

Commit 992c790

Browse files
vojtajinavojtajina
committed
refactor(scope): separate controller from scope
Controller is standalone object, created using "new" operator, not messed up with scope anymore. Instead, related scope is injected as $scope. See design proposal: https://docs.google.com/document/pub?id=1SsgVj17ec6tnZEX3ugsvg0rVVR11wTso5Md-RdEmC0k Closes angular#321 Closes angular#425 Breaks controller methods are not exported to scope automatically Breaks Scope#$new() does not take controller as argument anymore
1 parent f5343c9 commit 992c790

34 files changed

+477
-516
lines changed

‎docs/content/api/angular.inputType.ngdoc‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ All `inputType` widgets support:
4040
<doc:example>
4141
<doc:source>
4242
<script>
43-
angular.inputType('json', function() {
44-
this.$parseView = function() {
43+
angular.inputType('json', function(element, scope) {
44+
scope.$parseView = function() {
4545
try {
4646
this.$modelValue = angular.fromJson(this.$viewValue);
4747
if (this.$error.JSON) {
@@ -52,19 +52,19 @@ All `inputType` widgets support:
5252
}
5353
}
5454

55-
this.$parseModel = function() {
55+
scope.$parseModel = function() {
5656
this.$viewValue = angular.toJson(this.$modelValue);
5757
}
5858
});
5959

60-
function Ctrl() {
61-
this.data = {
60+
function Ctrl($scope) {
61+
$scope.data = {
6262
framework:'angular',
6363
codenames:'supper-powers'
6464
}
65-
this.required = false;
66-
this.disabled = false;
67-
this.readonly = false;
65+
$scope.required = false;
66+
$scope.disabled = false;
67+
$scope.readonly = false;
6868
}
6969
</script>
7070
<div ng:controller="Ctrl">

‎docs/content/cookbook/advancedform.ngdoc‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@ detection, and preventing invalid form submission.
88
<doc:example>
99
<doc:source>
1010
<script>
11-
function UserForm() {
12-
this.state = /^\w\w$/;
13-
this.zip = /^\d\d\d\d\d$/;
14-
this.master = {
11+
function UserForm($scope) {
12+
var master = {
1513
name: 'John Smith',
1614
address:{
1715
line1: '123 Main St.',
@@ -23,40 +21,42 @@ detection, and preventing invalid form submission.
2321
{type:'phone', value:'1(234) 555-1212'}
2422
]
2523
};
26-
this.cancel();
27-
}
2824

29-
UserForm.prototype = {
30-
cancel: function() {
31-
this.form = angular.copy(this.master);
32-
},
25+
$scope.state = /^\w\w$/;
26+
$scope.zip = /^\d\d\d\d\d$/;
3327

34-
save: function() {
35-
this.master = this.form;
36-
this.cancel();
37-
},
28+
$scope.cancel = function() {
29+
$scope.form = angular.copy(master);
30+
};
3831

39-
addContact: function() {
40-
this.form.contacts.push({type:'', value:''});
41-
},
32+
$scope.save = function() {
33+
master = $scope.form;
34+
$scope.cancel();
35+
};
36+
37+
$scope.addContact = function() {
38+
$scope.form.contacts.push({type:'', value:''});
39+
};
4240

43-
removeContact: function(contact) {
44-
for ( var i = 0, ii = this.form.contacts.length; i < ii; i++) {
45-
if (contact === this.form.contacts[i]) {
46-
this.form.contacts.splice(i, 1);
41+
$scope.removeContact = function(contact) {
42+
var contacts = $scope.form.contacts;
43+
for (var i = 0, ii = contacts.length; i < ii; i++) {
44+
if (contact === contacts[i]) {
45+
contacts.splice(i, 1);
4746
}
4847
}
49-
},
48+
};
5049

51-
isCancelDisabled: function() {
52-
return angular.equals(this.master, this.form);
53-
},
50+
$scope.isCancelDisabled = function() {
51+
return angular.equals(master, $scope.form);
52+
};
5453

55-
isSaveDisabled: function() {
56-
return this.myForm.$invalid || angular.equals(this.master, this.form);
57-
}
54+
$scope.isSaveDisabled = function() {
55+
return $scope.myForm.$invalid || angular.equals(master, $scope.form);
56+
};
5857

59-
};
58+
$scope.cancel();
59+
}
6060
</script>
6161
<div ng:controller="UserForm">
6262

@@ -91,8 +91,7 @@ detection, and preventing invalid form submission.
9191

9292
<hr/>
9393
Debug View:
94-
<pre>form={{form}}
95-
master={{master}}</pre>
94+
<pre>form={{form}}</pre>
9695
</div>
9796
</doc:source>
9897
<doc:scenario>

‎docs/content/cookbook/deeplinking.ngdoc‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -39,42 +39,38 @@ The two partials are defined in the following URLs:
3939
<doc:example>
4040
<doc:source jsfiddle="false">
4141
<script>
42-
AppCntl.$inject = ['$route']
43-
function AppCntl($route) {
42+
AppCntl.$inject = ['$scope', '$route']
43+
function AppCntl($scope, $route) {
4444
// define routes
4545
$route.when("/welcome", {template:'./examples/welcome.html', controller:WelcomeCntl});
4646
$route.when("/settings", {template:'./examples/settings.html', controller:SettingsCntl});
47-
$route.parent(this);
47+
$route.parent($scope);
4848

4949
// initialize the model to something useful
50-
this.person = {
50+
$scope.person = {
5151
name:'anonymous',
5252
contacts:[{type:'email', url:'[email protected]'}]
5353
};
5454
}
5555

56-
function WelcomeCntl($route){}
57-
WelcomeCntl.prototype = {
58-
greet: function() {
59-
alert("Hello " + this.person.name);
60-
}
61-
};
62-
63-
SettingsCntl.$inject = ['$location'];
64-
function SettingsCntl($location){
65-
this.$location = $location;
66-
this.cancel();
56+
function WelcomeCntl($scope) {
57+
$scope.greet = function() {
58+
alert("Hello " + $scope.person.name);
59+
};
60+
}
61+
62+
function SettingsCntl($scope, $location) {
63+
$scope.cancel = function() {
64+
$scope.form = angular.copy($scope.person);
65+
};
66+
67+
$scope.save = function() {
68+
angular.copy($scope.form, $scope.person);
69+
$location.path('/welcome');
70+
};
71+
72+
$scope.cancel();
6773
}
68-
SettingsCntl.prototype = {
69-
cancel: function() {
70-
this.form = angular.copy(this.person);
71-
},
72-
73-
save: function() {
74-
angular.copy(this.form, this.person);
75-
this.$location.path('/welcome');
76-
}
77-
};
7874
</script>
7975
<div ng:controller="AppCntl">
8076
<h1>Your App Chrome</h1>

‎docs/content/cookbook/form.ngdoc‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,23 @@ allow a user to enter data.
1010
<doc:example>
1111
<doc:source>
1212
<script>
13-
function FormController() {
14-
this.user = {
13+
function FormController($scope) {
14+
$scope.user = {
1515
name: 'John Smith',
1616
address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},
1717
contacts:[{type:'phone', value:'1(234) 555-1212'}]
1818
};
19-
this.state = /^\w\w$/;
20-
this.zip = /^\d\d\d\d\d$/;
19+
$scope.state = /^\w\w$/;
20+
$scope.zip = /^\d\d\d\d\d$/;
2121

22-
this.addContact = function() {
23-
this.user.contacts.push({type:'', value:''});
22+
$scope.addContact = function() {
23+
$scope.user.contacts.push({type:'', value:''});
2424
};
2525

26-
this.removeContact = function(contact) {
27-
for ( var i = 0, ii = this.user.contacts.length; i < ii; i++) {
26+
$scope.removeContact = function(contact) {
27+
for (var i = 0, ii = this.user.contacts.length; i < ii; i++) {
2828
if (contact === this.user.contacts[i]) {
29-
this.user.contacts.splice(i, 1);
29+
$scope.user.contacts.splice(i, 1);
3030
}
3131
}
3232
};

‎docs/content/cookbook/helloworld.ngdoc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<doc:example>
66
<doc:source>
77
<script>
8-
function HelloCntl() {
9-
this.name = 'World';
8+
function HelloCntl($scope) {
9+
$scope.name = 'World';
1010
}
1111
</script>
1212
<div ng:controller="HelloCntl">

‎docs/content/cookbook/mvc.ngdoc‎

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -14,66 +14,69 @@ no connection between the controller and the view.
1414
<doc:example>
1515
<doc:source>
1616
<script>
17-
function TicTacToeCntl($location){
18-
this.$location = $location;
19-
this.cellStyle= {
17+
function TicTacToeCntl($scope, $location) {
18+
$scope.cellStyle= {
2019
'height': '20px',
2120
'width': '20px',
2221
'border': '1px solid black',
2322
'text-align': 'center',
2423
'vertical-align': 'middle',
2524
'cursor': 'pointer'
2625
};
27-
this.reset();
28-
this.$watch('$location.search().board', this.readUrl);
29-
}
30-
TicTacToeCntl.prototype = {
31-
dropPiece: function(row, col) {
32-
if (!this.winner && !this.board[row][col]) {
33-
this.board[row][col] = this.nextMove;
34-
this.nextMove = this.nextMove == 'X' ? 'O' : 'X';
35-
this.setUrl();
36-
}
37-
},
38-
reset: function() {
39-
this.board = [
26+
27+
$scope.reset = function() {
28+
$scope.board = [
4029
['', '', ''],
4130
['', '', ''],
4231
['', '', '']
4332
];
44-
this.nextMove = 'X';
45-
this.winner = '';
46-
this.setUrl();
47-
},
48-
grade: function() {
49-
var b = this.board;
50-
this.winner =
33+
$scope.nextMove = 'X';
34+
$scope.winner = '';
35+
setUrl();
36+
};
37+
38+
$scope.dropPiece = function(row, col) {
39+
if (!$scope.winner && !$scope.board[row][col]) {
40+
$scope.board[row][col] = $scope.nextMove;
41+
$scope.nextMove = $scope.nextMove == 'X' ? 'O' : 'X';
42+
setUrl();
43+
}
44+
};
45+
46+
$scope.reset();
47+
$scope.$watch(function() { return $location.search().board;}, readUrl);
48+
49+
function setUrl() {
50+
var rows = [];
51+
angular.forEach($scope.board, function(row) {
52+
rows.push(row.join(','));
53+
});
54+
$location.search({board: rows.join(';') + '/' + $scope.nextMove});
55+
}
56+
57+
function grade() {
58+
var b = $scope.board;
59+
$scope.winner =
5160
row(0) || row(1) || row(2) ||
5261
col(0) || col(1) || col(2) ||
5362
diagonal(-1) || diagonal(1);
5463
function row(row) { return same(b[row][0], b[row][1], b[row][2]);}
5564
function col(col) { return same(b[0][col], b[1][col], b[2][col]);}
5665
function diagonal(i) { return same(b[0][1-i], b[1][1], b[2][1+i]);}
5766
function same(a, b, c) { return (a==b && b==c) ? a : '';};
58-
},
59-
setUrl: function() {
60-
var rows = [];
61-
angular.forEach(this.board, function(row){
62-
rows.push(row.join(','));
63-
});
64-
this.$location.search({board: rows.join(';') + '/' + this.nextMove});
65-
},
66-
readUrl: function(scope, value) {
67+
}
68+
69+
function readUrl(scope, value) {
6770
if (value) {
6871
value = value.split('/');
69-
this.nextMove = value[1];
72+
$scope.nextMove = value[1];
7073
angular.forEach(value[0].split(';'), function(row, col){
71-
this.board[col] = row.split(',');
72-
}, this);
73-
this.grade();
74+
$scope.board[col] = row.split(',');
75+
});
76+
grade();
7477
}
7578
}
76-
};
79+
}
7780
</script>
7881

7982
<h3>Tic-Tac-Toe</h3>

‎docs/content/guide/dev_guide.expressions.ngdoc‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,14 @@ You can try evaluating different expressions here:
5151
<doc:example>
5252
<doc:source>
5353
<script>
54-
function Cntl2() {
55-
this.exprs = [];
56-
this.expr = '3*10|currency';
57-
this.addExp = function(expr) {
54+
function Cntl2($scope) {
55+
$scope.exprs = [];
56+
$scope.expr = '3*10|currency';
57+
$scope.addExp = function(expr) {
5858
this.exprs.push(expr);
5959
};
6060

61-
this.removeExp = function(contact) {
61+
$scope.removeExp = function(contact) {
6262
for ( var i = 0, ii = this.exprs.length; i < ii; i++) {
6363
if (contact === this.exprs[i]) {
6464
this.exprs.splice(i, 1);
@@ -101,10 +101,10 @@ the global state (a common source of subtle bugs).
101101
<doc:example>
102102
<doc:source>
103103
<script>
104-
function Cntl1($window){
105-
this.name = 'World';
104+
function Cntl1($window, $scope){
105+
$scope.name = 'World';
106106

107-
this.greet = function() {
107+
$scope.greet = function() {
108108
($window.mockWindow || $window).alert('Hello ' + this.name);
109109
}
110110
}

0 commit comments

Comments
 (0)