While making more progressed AngularJS applications, eventually your application should handle DOM events like mouse clicks, moves, keyboard presses, change events etc. AngularJS has a basic model for how to add event listeners members to the HTML you create from your perspectives. This content will clarify this model.
For Video session visit:Event handling
Event Listener Directives in AngularJs:-
Description:-
When you tap the internal div of the above illustration, the "Data.dataClick()" function will called. As should be obvious in the controller functions , the "Data" object has a "dataClick()" functions added to it.
As should be obvious, joining events to HTML DOM components is very little not the same as creating the HTML in any case. The event listener functions called are functions added to the "$scope" object by the controller functions .
parameterized($event) event listener directive example in AngularJs:-
Description:-
In this example iterates through a list of "items" data, generates li elements from them, and adds click listeners to each li html element. Along with the call to the click listener is passed the item JavaScript object the li html element was generated based on, along with the click event object "($event)".
For Video session visit:Event handling
 |
| Event Handling Flow chart |
You can use an event listener to an HTML element using one of the AngularJS event listener directives:-
ng-clickng-dbl-clickng-mousedownng-mouseupng-mouseenterng-mouseleaveng-mousemoveng-mouseoverng-keydownng-keyupng-keypressng-change
Basic event listener directive example in AngularJs:-
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="Myctrl" > <div ng-click="Data.dataClick ()">Submit</div> </div> <script> angular.module("app", []) .controller("myctrl", function($scope) { $scope.Data = {}; $scope.Data.dataClick = function() { alert("clicked on button!!"); } } ); </script> </body> </html>
Description:-
When you tap the internal div of the above illustration, the "Data.dataClick()" function will called. As should be obvious in the controller functions , the "Data" object has a "dataClick()" functions added to it.
As should be obvious, joining events to HTML DOM components is very little not the same as creating the HTML in any case. The event listener functions called are functions added to the "$scope" object by the controller functions .
parameterized($event) event listener directive example in AngularJs:-
parameterized($event,item) event listener directive example in AngularJs:-<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="myctrl" > <div ng-click="Data.dataClick($event)">Submit</div> </div> <script> angular.module("app", []) .controller("myctrl", function($scope) { $scope.Data = {}; $scope.Data.dataClick = function(event) { alert("clicked Event : " + event.clientX + ", " + event.clientY); } } ); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="myctrl" > <ul> <li ng-repeat="item in Data.items" ng-click="Data.dataClick(item, $event)">Submit</li> </ul> </div> <script> angular.module("app", []) .controller("myctrl", function($scope) { $scope.Data = {}; $scope.Data.items = [{ v: "1"}, { v: "2"}, { v : "3"} ]; $scope.Data.dataClick = function(item, event) { alert("clicked Event: " + item.v + " @ " + event.clientX + ": " + event.clientY); } } ); </script> </body> </html>
Description:-
In this example iterates through a list of "items" data, generates li elements from them, and adds click listeners to each li html element. Along with the call to the click listener is passed the item JavaScript object the li html element was generated based on, along with the click event object "($event)".
Bikesh Srivastava
AngularJs
