AngularJS ng-mousemove Directive
The ng-mousemove Directive in AngularJS is used to apply custom behavior when mousemove event occurs on a specific HTML element. It can be used to display a popup alert when the mouse moves over a specific HTML element. It is supported by all HTML elements.
Syntax:
<element ng-mousemove="expression">
Contents...
</element>
Parameter value:
- expression: This parameter depicts when the mouse cursor is moved over the element then the expression will be executed.
Example 1: This example uses the ng-mousemove Directive to change the CSS style.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-mousemove Directive</ title >
< script src =
</ script >
</ head >
< body ng-app = "app" style = "padding-left:30px;" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >ng-mousemove Directive</ h2 >
< div ng-controller = "geek" >
< div style = "height:20px;width:20px; "
ng-style="{'backgroundColor':'lightgreen',
width:X+'px',
height:Y+'px' }"
ng-mousemove = "down($event)" ></ div >
< pre ng-show = "X" >Current position: {{X}}, {{Y}}</ pre >
</ div >
< script >
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.down = function (event) {
$scope.X = event.clientX;
$scope.Y = event.clientY;
};
}]);
</ script >
</ body >
</ html >
|
Output:
Example 2: This example uses the ng-mousemove Directive to display the alert message.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-mousemove Directive</ title >
< script src =
</ script >
</ head >
< body ng-app = "app" style = "text-align:center" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >ng-mousemove 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:
Last Updated :
26 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...