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 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>
Example 1:
html
<!DOCTYPE html> < html > 1.6.9/angular.min.js"></ script > < head > < title >ng-mouseleave Directive</ title > </ head > < body ng-app = "" style = "text-align: center" > < h1 style = "color:green" >GeeksforGeeks</ h1 > < h2 >ng-mouseleave Directive</ h2 > < 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:
Before Mouseleave:
After Mouseleave:
Example 2:
html
<!DOCTYPE html> < html > 1.6.9/angular.min.js"></ script > < head > < title >ng-mouseleave Directive</ title > </ head > < body ng-app = "app" style = "text-align:center" > < h1 style = "color:green" >GeeksforGeeks</ h1 > < h2 >ng-mouseleave Directive</ h2 > < 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:
Before Mouseleave:
After Mouseleave:
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.