When we want to create advanced AngularJS applications such as User Interaction Forms, then we need to handle DOM events like mouse clicks, moves, keyboard presses, change events and so on. AngularJS has a simple model for how to add event listeners. We can attach an event listener to an HTML element using one of the following AngularJS event listener directives:
- ng-click
- ng-dbl-click
- ng-mousedown
- ng-mouseup
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-keydown
- ng-keyup
- ng-keypress
- ng-change
Here is a simple AngularJS event listener directive example:
- @{
- Layout = null;
- }
-
- <!DOCTYPE html>
-
- <html>
- <head>
- <meta name="viewport" content="width=device-width" />
- <title>Acgular Event</title>
- <script src="~/Scripts/angular.js"></script>
-
- <script>
- angular.module("myapp", [])
- .controller("Controller1", function ($scope) {
- $scope.myData = {};
- $scope.myData.dvClick = function () {
- alert("Div clicked");
- }
- });
-
- </script>
- </head>
- <body ng-app="myapp">
- <div ng-controller="Controller1">
- <div ng-click="myData.dvClick()">Click here</div>
- </div>
- </body>
- </html>
When we click the text within the div, the myData.dvClick() function will be called. As you can see in the controller function, the myData object has a dvClick() function added to it. The event listener functions called are functions added to the $scope object by the controller function.
The event listener directives have a special variable named $event that we can use as a parameter to the event listener function. The $event variable contains the original browser event object. Here is an example:
- @{
- Layout = null;
- }
-
- <!DOCTYPE html>
-
- <html>
- <head>
- <meta name="viewport" content="width=device-width" />
- <title>Acgular Event</title>
- <script src="~/Scripts/angular.js"></script>
-
- <script>
- angular.module("myapp", []).controller("Controller1", function ($scope) {
- $scope.myData = {};
- $scope.myData.dvClick = function (event) {
- alert("clicked: " + event.clientX + ", " + event.clientY);
- }
- });
- </script>
- </head>
- <body ng-app="myapp">
- <div ng-controller="Controller1">
- <div ng-click="myData.dvClick($event)">Click here With Event</div>
- </div>
- </body>
- </html>
We can also other parameters to our event listener functions. Here is an example that adds an event listener function to a list of li elements:
- @{
- Layout = null;
- }
-
- <!DOCTYPE html>
-
- <html>
- <head>
- <meta name="viewport" content="width=device-width" />
- <title>Acgular Event</title>
- <script src="~/Scripts/angular.js"></script>
-
- <script>
- angular.module("myapp", [])
- .controller("Controller1", function ($scope) {
- $scope.myData = {};
- $scope.myData.items = [{ CName: "Smith" }, { CName: "John" }, { CName: "Tony" }];
-
- $scope.myData.dvClick = function (item, event) {
- alert("clicked on : " + item.CName + " + " + event.clientX + ": " + event.clientY);
- }
- });
- </script>
- </head>
- <body ng-app="myapp">
- <div ng-controller="Controller1">
- <ul>
- <li ng-repeat="item in myData.items"
- ng-click="myData.dvClick(item, $event)">{{item.CName}}</li>
- </ul>
- </div>
- </body>
- </html>