AngularJS ng-mousemove Directive

Last Updated : 29 Jul, 2024

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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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:

HTML | DOM Style borderLeftWidth Property

Vishal Chaudhary 2

Improve

Article Tags :

AngularJS ng-mousemove Directive

Similar Reads

Thank You!

What kind of Experience do you want to share?