Here we will learn what is ng-mouseleave event directive in angularjs, use of ng-mouseleave event in angularjs, raise custom event / function whenever mouse curosor leave from elements using ng-mouseleave event in angularjs applications.
In angularjs ng-mouseleave event directive is used to execute or raise events / functions when the mouse cursor leaves from an elements.
The ng-mouseleave event in angularjs will fire an events whenever mouse cursor move away from an element.
Suppose in angularjs application if you want to raise an event / function whenever mouse cursor leaves an elements then it’s better to use ng-mouseleave event.
Following is the syntax of using angularjs ng-mouseleave event directive in applications.
<element ng-mouseleave="expression">
--Your Code--
</element>
In angularjs whenever mouse pointer or cursor moved away from html elements then ng-mouseleave event will fire and execute expression and it will support all html elements.
The ng-mouseleave event in angularjs will not override onmouseleave event of html elements both will execute separately.
Following is the example to raise custom function whenever mouse pointer moved away from input html element by using ng-mouseleave event in angularjs application.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-mouseleave Event with 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('ngmouseleaveApp', []);
app.controller('ngmouseleaveCtrl', function ($scope) {
$scope.count = 0;
$scope.getdetails = function () {
$scope.count = $scope.count + 1;
}
});
</script>
</head>
<body>
<div ng-app="ngmouseleaveApp" ng-controller="ngmouseleaveCtrl">
<h2>AngularJS ng-mouseleave Event Example</h2>
<input type="button" ng-mouseleave="getdetails()" value="Move Away From Here"><br /><br />
<span style="color:Red">No. of Times MouseLeave Event Fired: {{count}}</span>
</div>
</body>
</html>
If you observe above angularjs ng-mouseleave event example we are calling function getdetails() and showing number of times mouseleave event fired in application.
Following is the result of using ng-mouseleave event in angularjs applications.
This is how we can use ng-mouseleave event in angularjs applications to raise events whenever mouse pointer / cursor leaves from an elements.