AngularJS ng-mouseleave Directive
The ng-mouseleave directive in AngularJS is used to apply custom behavior when a mouse-leave event occurs on a specific HTML element. It can be used to show a popup alert when the mouse leaves a specific position in an HTML element. It is supported by all HTML elements.
Syntax:
<element ng-mouseleave="expression">
content ...
</element>
Parameter:
- expression: When the mouse cursor leaves an element, then this expression will execute.
Example 1: This example describes the ng-mouseleave Directive in AngularJS.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< title >ng-mouseleave Directive</ title >
</ head >
< body ng-app = "" style = "text-align: center" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 >ng-mouseleave Directive</ h3 >
< div >price :</ div >
< div ng-hide = "leave"
ng-mouseenter = "leave=true" >
< span class = "amount" >$ {{price}}</ span >
</ div >
< div ng-show = "leave"
ng-mouseleave = "leave=false" >
< input type = "number"
class = "form-control"
ng-model = "price"
ng-init = "price=250" />
</ div >
</ body >
</ html >
|
Output:
Example 2: This example describes the ng-mouseleave Directive in AngularJS, by specifying the <input> tag that has the ng-mouseleave directive containing the alert() function which helps to display the data in the alert message.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-mouseleave Directive</ title >
< script src =
</ script >
</ head >
< body ng-app = "app" style = "text-align:center" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 >ng-mouseleave Directive</ h3 >
< div ng-controller = "app" >
Input:
< input type = "text"
ng-mouseleave = "alert()"
ng-model = "click" />
</ div >
< script >
var app = angular.module("app", []);
app.controller('app', ['$scope', function ($scope) {
$scope.click = 'geeksforgeeks';
$scope.alert = function () {
alert($scope.click);
}
}]);
</ script >
</ body >
</ html >
|
Output:
Last Updated :
08 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...