Interacting with the Scope in Expressions
Now that you have seen some basic AngularJS expressions, let’s take a look at how to interact with the scope inside AngularJS expressions. In the previous example all the input for the expressions came from explicit strings or numbers. This example illustrates the true power of AngularJS expressions that come from interacting with the model.
The code in Listing 5.3 implements a basic AngularJS application with a controller. The controller contains the variables speed, vehicle, newSpeed, and newVehicle in the scope. It also includes three functions, upper, lower, and setValues. These variables and functions are utilized in AngularJS expressions in the template shown in Listing 5.4.
The code in Listing 5.4 implements an AngularJS template that applies AngularJS expressions that use values from the scope to render text to the screen as well as act as parameters to functions. The first thing to note is that the variable names in the scope can be used directly in the expressions. For example, the following expression in line 14 creates a string based on the values of the speed and vehicle variables.
{{speed + ' ' + vehicle}}
Another thing to note is that you can call functions in the scope from within an AngularJS expression. When the expression is evaluated, the back-end function is called and the return value is rendered to the view. You can pass variable names from the scope into a function, as well as numbers and strings, as illustrated in the following expression from line 19:
<a ng-click="setValues('Fast', newVehicle)">
The final thing to note is that the values assigned to the AngularJS attributes of the HTML elements are evaluated as AngularJS expressions even though they are not explicitly wrapped in {{}} brackets.
Figure 5.2 shows the rendered web page based on the expressions. Note that when the links of the page are clicked on, the resulting function calls adjust the scope, which changes how the previously discussed expressions are rendered.
Listing 5.3 expressions_scope.js: Building a Scope That AngularJS Expressions Can Use
01 angular.module('myApp', [])
02 .controller('myController', function($scope) {
03 $scope.speed = 'Slow';
04 $scope.vehicle = 'Train';
05 $scope.newSpeed = 'Hypersonic';
06 $scope.newVehicle = 'Plane';
07 $scope.upper = function(aString){
08 return angular.uppercase(aString);
09 };
10 $scope.lower = function(aString){
11 return angular.lowercase(aString);
12 };
13 $scope.setValues = function(speed, vehicle){
14 $scope.speed = speed;
15 $scope.vehicle = vehicle;
16 };
17 });
Listing 5.4 expressions_scope.html: An AngularJS Template That Uses Expressions in Various Ways to Interact with Data from the Scope Model
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Expressions</title>
05 <style>
06 a{color: blue; text-decoration: underline; cursor: pointer}
07 </style>
08 </head>
09 <body>
10 <div ng-controller="myController">
11 Directly accessing variables in the scope:<br>
12 {{speed}} {{vehicle}}<hr>
13 Adding variables in the scope:<br>
14 {{speed + ' ' + vehicle}}<hr>
15 Calling function in the scope:<br>
16 {{lower(speed)}} {{upper('Jeep')}}<hr>
17 <a ng-click="setValues('Fast', newVehicle)">
18 Click to change to Fast {{newVehicle}}</a><hr>
19 <a ng-click="setValues(newSpeed, 'Rocket')">
20 Click to change to {{newSpeed}} Rocket</a><hr>
21 <a ng-click="vehicle='Car'">
22 Click to change the vehicle to a Car</a><hr>
23 <a ng-click="vehicle='Enhanced ' + vehicle">
24 Click to Enhance Vehicle</a><hr>
25 <script src="http://code.angularjs.org/1.3.0/angular.min.js"></script>
26 <script src="js/expressions_scope.js"></script>
27 </body>
28 </html>