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.
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 });
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>