Directives That Bind Page Events to Controllers
AngularJS templates enable you to bind browser events to controller code. This means you can handle user input from the scope’s perspective. You can then implement handlers for browser events directly to the appropriate scope. The event directive works very much like the normal browser event handlers, except that they are directly linked to the scope context.
Table 24.4 lists the directive that binds page and device events to the AngularJS model. Each of these directives allows you to specify an expression, which is typically a function defined in the scope, as discussed in Chapter 23, “Using AngularJS Templates to Create Views.” For example, the following is a function named setTitle in the scope:
$scope.setTitle = function(title){
$scope.title = title;
};
You can bind the setTitle() function in the scope directly to an input button in the view by using the following ng-click directive:
<input type="button" ng-click="setTitle{'New Title')">
You can pass the JavaScript Event object into the event expressions by using the $event keyword. This allows you to access information about the event as well as stop propagation and everything else you normally can do with a JavaScript Event object. For example, the following ng-click directive passes the mouse click event to the myClick() handler function:
<input type="button" ng-click="myClick($event)">
Listings 24.5 and 24.6 provide some examples of basic AngularJS event directives. Listing 24.5 initializes the scope values and implements a keyboard press and mouse click event handler that collect information from the Event object.
Listing 24.6 implements a series of event directives on a single <input> element, as shown in Figure 24.3. Notice that lines 17 and 18 pass the keyboard and mouse event object into the function by using the $event variable name.
Listing 24.5 directive_event.js: Implementing a controller with scope data and event handlers
01 angular.module('myApp', []).
02 controller('myController', function($scope) {
03 $scope.keyInfo = {};
04 $scope.mouseInfo = {};
05 $scope.keyStroke = function(event){
06 $scope.keyInfo.keyCode = event.keyCode;
07 };
08 $scope.mouseClick = function(event){
09 $scope.mouseInfo.clientX = event.clientX;
10 $scope.mouseInfo.clientY = event.clientY;
11 $scope.mouseInfo.screenX = event.screenX;
12 $scope.mouseInfo.screenY = event.screenY;
13 };
14 });
Listing 24.6 directive_event.html: An AngularJS template that implements several different event directives
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Event Directives</title>
05 </head>
06 <body>
07 <div ng-controller="myController">
08 <h2>Event Directives</h2>
09 <input type="text"
10 ng-blur="focusState='Blurred'"
11 ng-focus="focusState='Focused'"
12 ng-mouseenter="mouseState='Entered'"
13 ng-mouseleave="mouseState='Left'"
14 ng-mouseclick="mouseState='Clicked'"
15 ng-mousedown="mouseState='Down'"
16 ng-mouseup="mouseState='Up'"
17 ng-keyup="keyStroke($event)"
18 ng-click="mouseClick($event)"><hr>
19 Focus State: {{focusState}}<br/>
20 Mouse State: {{mouseState}}<br/>
21 Key Info: {{keyInfo|json}}<br/>
22 Mouse Info: {{mouseInfo|json}}<br/>
23 </div>
24 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
25 <script src="/js/directive_event.js"></script>
26 </body>
27 </html>
