Here we will learn ng-mousemove event directive in angularjs, use of ng-mousemove event in angularjs and raise events while moving mouse curosr over html elements using ng-mousemove directive in angularjs.
In angularjs ng-mousemove event directive is used to execute or raise custom events / functions when mouse cursor moving on html elements.
The ng-mousemove event in angularjs will fire an events while moving mouse cursor over an element.
Suppose in angularjs application if you want to raise an event / function while moving mouse cursor over html elements then it’s better to use ng-mousemove event.
Following is the syntax of using angularjs ng-mousemove event directive in applications.
<element ng-mousemove="expression">
--Your Code--
</element>
In angularjs whenever mouse pointer or cursor moving on html elements then ng-mousemove event will fire and execute expression and ng-mousemove event will support all html elements.
The ng-mousemove event in angularjs will not override onmousemove event of html elements both will execute separately.
Following is the example to raise custom function whenever mouse moving over html element by using ng-mousemove event in angularjs application.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-mousemove Event with Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngmousemoveApp', []);
app.controller('ngmousemoveCtrl', function ($scope) {
$scope.count = 0;
$scope.getdetails = function () {
$scope.count = $scope.count + 1;
}
});
</script>
</head>
<body>
<div ng-app="ngmousemoveApp" ng-controller="ngmousemoveCtrl">
<h2>AngularJS ng-mousemove Event Example</h2>
<div style="padding:10px; border:1px solid black; width:30%; cursor:pointer; font-weight:bold" ng-mousemove="getdetails()">Move Mouse Cursor Here...</div><br /><br />
<span style="color:Red">No. of Times MouseMove Event Fired: {{count}}</span>
</div>
</body>
</html>
If you observe above angularjs ng-mousemove event example we are calling function getdetails() in ng-mousemove event and showing number of times mousemove event fired while moving mouse cursor on div element.
Following is the result of using ng-mousemove event in angularjs applications.
This is how we can use ng-mousemove event in angularjs applications to raise events whenever mouse pointer / cursor moves over html elements.