Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Update dev_guide.mvc.understanding_controller.ngdoc #4373

Closed
wants to merge 1 commit into from
Closed

Update dev_guide.mvc.understanding_controller.ngdoc #4373

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 41 additions & 34 deletions docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,23 +103,25 @@ string "very". Depending on which button is clicked, the `spice` model is set to
## A Spicy Controller Example

<pre>
<body ng-controller="SpicyCtrl">
<body ng-app="SpicyApp" ng-controller="SpicyCtrl">
<button ng-click="chiliSpicy()">Chili</button>
<button ng-click="jalapenoSpicy()">Jalapeño</button>
<p>The food is {{spice}} spicy!</p>
</body>

function SpicyCtrl($scope) {
$scope.spice = 'very';
$scope.chiliSpicy = function() {
$scope.spice = 'chili';
}
$scope.jalapenoSpicy = function() {
$scope.spice = 'jalapeño';
}
}


var myApp = angular.module('SpicyApp', []);

myApp.controller('SpicyCtrl', ['$scope', function($scope){
$scope.spicy = 'very';

$scope.chiliSpicy = function() {
$scope.spice = 'chili';
};

$scope.jalapenoSpicy = function() {
$scope.spice = 'jalapeño';
};
}]);
</pre>

Things to notice in the example above:
Expand Down Expand Up @@ -147,19 +149,24 @@ previous example.
## Controller Method Arguments Example

<pre>
<body ng-controller="SpicyCtrl">
<input ng-model="customSpice" value="wasabi">
<body ng-app="SpicyApp" ng-controller="SpicyCtrl">
<input ng-model="customSpice">
<button ng-click="spicy('chili')">Chili</button>
<button ng-click="spicy(customSpice)">Custom spice</button>
<p>The food is {{spice}} spicy!</p>
</body>

function SpicyCtrl($scope) {
$scope.spice = 'very';
$scope.spicy = function(spice) {
$scope.spice = spice;
}
}
var myApp = angular.module('SpicyApp', []);

myApp.controller('SpicyCtrl', ['$scope', function($scope){
$scope.customSpice = "wasabi";
$scope.spice = 'very';

$scope.spicy = function(spice){
$scope.spice = spice;
};
}]);

</pre>

Notice that the `SpicyCtrl` controller now defines just one method called `spicy`, which takes one
Expand All @@ -174,27 +181,27 @@ Controller inheritance in Angular is based on {@link api/ng.$rootScope.Scope Sco
have a look at an example:

<pre>
<body ng-controller="MainCtrl">
<body ng-app="MyApp" ng-controller="MainCtrl">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="ChildCtrl">
<p>Good {{timeOfDay}}, {{name}}!</p>
<p ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p>
</div>
</body>

function MainCtrl($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'Nikki';
}

function ChildCtrl($scope) {
$scope.name = 'Mattie';
}

function BabyCtrl($scope) {
$scope.timeOfDay = 'evening';
$scope.name = 'Gingerbreak Baby';
}
var myApp = angular.module('MyApp', [])

.controller('MainCtrl', ['$scope', function($scope){
$scope.timeOfDay = 'morning';
$scope.name = 'Nikki';
}])
.controller('ChildCtrl', ['$scope', function($scope){
$scope.name = 'Mattie';
}])
.controller('BabyCtrl', ['$scope', function($scope){
$scope.timeOfDay = 'evening';
$scope.name = 'Gingerbreak Baby';
}]);
</pre>

Notice how we nested three `ngController` directives in our template. This template construct will
Expand Down