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)".
You have just read an article that categorized by title AngularJs
by title Event Handling in AngularJs.. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/03/part-15event-handling-in-angularjs.html. Thank You!
Author:
Bikesh Srivastava - Monday, March 14, 2016
Thank you.Well it was nice post and very helpful information on
ReplyDeleteAngularJS5 Online Training
You rock particularly for the high caliber and results-arranged offer assistance. I won't reconsider to embrace your blog entry to anyone who needs and needs bolster about this region. We are providing angularJs training in velchery.
ReplyDeletefor more details:AngularJs training in chennai
ReplyDeleteThanks for providing a good stuff.
Angular JS Online training
Angular JS training in hyderabad
You have written an informative post. Looking forward to read more.
ReplyDeleteResponsive Website Design Services
I like your post very much. It is very useful for my research. I hope you can share more info about this. Keep posting mule 4 certification
ReplyDeleteservicenow developer Certification
Workday training
Workday financial training
Workday HCM Online training
Thank you for sharing this informative post. Looking forward to read more.
ReplyDeleteResponsive Web Design Services
hank you for sharing valuable information.
ReplyDeleteAngularjs online training