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:
Please Login to comment...