AngularJS Events Listener Directives

Posted By : Swati Rahangdale | 29-Jan-2018

angularjs

AngularJS Events Listener Directives:

AngularJS have certain directives which can be used to provide custom behavior on various DOM(Document Object Model) events, such as ng-click ,ng-dbl-click, ng-mousedown etc.

Below is the Following lists of AngularJS event directives.

Event Directives

ng-dbl-click

ng-mousedown

ng-mouseup

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-mouseover

ng-keydown

ng-keyup

ng-keypress

ng-click:

The ng-click directive is used to arrange event handler for click event.

Eg: ng-click

<!DOCTYPE html>
<html >
<head>
<script src="Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="mynewController">
Enter Password: <input type="name" ng-model="name" /> <br />
<button ng-click="DisplayNewMessage(name)">Show Name</button
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("mynewController", function ($scope, $window) {
$scope. DisplayNewMessage = function (value) {
$window.alert(value)
}
});
</script>
</body>
</html>

ng-click :

Directive is used to call DisplayNewMessage() function with the 'name' parameter when a user clicks a button. A 'name' is a model property defined using ng-model directive in the input box.

ng-focus:

The ng-focus event in angularjs to support window object <select>, <input>, <textarea>, <a> elements.

Syntax of ng-focus event .

--Your Code--

</element>

ng-blur: ng-blur event is used to fire validation or call function when input element lost its focus or comes outside of element.

Eg:

<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-blur Event Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngblurApp', []);
app.controller('ngblurCtrl', function ($scope) {
$scope.getdetails = function () {
$scope.result = "You Came Out of Control";
}
});
</script>
</head>
<body>
<div ng-app="ngblurApp" ng-controller="ngblurCtrl">
<h2>AngularJs ng-blur Event Directive Example</h2>
Enter Text: <input type="text" ng-blur ="getdetails()" /><br /><br />
<span style="color:Red">{{result}}</span>
</div>
</body>
</html>

Mouse events:

The following example demonstrates important mouse event directives - ng-mouseenter and ng-mouseleave.

Ex:

<!DOCTYPE html>
<html>
<head>
<script src="/Scripts/angular.js"></script>
<style>
.redDiv {
width: 100px;
height: 100px;
background-color: red;
padding:2px 2px 2px 2px;
}

.greenDiv {
width: 100px;
height: 100px;
background-color: yellow;
padding:2px 2px 2px 2px;
}
</style>
</head>
<body ng-app>
<div ng-class="{redDiv: enter, greenDiv: leave}" ng-mouseenter="enter=true;leave=false;" ng-mouseleave="leave=true;enter=false">
Mouse <span ng-show="enter">Enter</span> <span ng-show="leave">Leave</span>
</div>
</body>
</html>

Above discussed example of the ng-class directive includes map of CSS classes, so redDiv will be applied if enter=true and greenDiv will be applied if leave=true. The ng-mouseenter directive sets 'enter' to true, which will apply redDiv class to the <div> element. In the same way, ng-mouseleave will set leave to true, which will apply greenDiv class.