Mouse Event Directives In AngularJS

Introduction

AngularJS has many built-in directives that are used to specify the event. In this article we will discuss about mouse directives. AngularJS has the following directives to support mouse event.

ngMousedown

The ngMouseDown directive allows us to specify the behavior of element(s) on mousedown event. This directive has highest priority.

Syntax

<ANY ELEMENT ng-mousedown="expression">
   ...
</ANY ELEMENT>

Example

HTML

<h4>ngMouseDown Example</h4>
<div ng-controller="HomeController">
    <button ng-mousedown="count = count + 1" ng-init="count=0">
        Mouse Down
    </button>
    <br /> Count of mouse down on above button: {{count}}
</div>

Controller

Here there is no specific item need to done in controller, hence I have defined  blank controller.

var app = angular.module("app", []);
app.controller("HomeController", function ($scope) {

});

Output



ngMouseenter

The ngMouseenter directive allows us to specify the behavior of element(s) on mouse enter event. This directive has highest priority.

Syntax

<ANY ELEMENT ng-mouseenter="expression">
   ...
</ANY ELEMENT>

Example

HTML

<h4>ngMouseEnter Example</h4>
<div ng-controller="HomeController">
    <div style="width:150px;height:50px;background-color:gray" ng-mouseenter="count = count + 1" ng-init="count=0">
    </div>
    <br /> Count of mouse enter on above div object: {{count}}
</div>

Controller code is same as above example.

Output



ngMouseleave

The ngMouseleave directive allows us to specify the behavior of element(s) on mouse leave event. This directive has highest priority.

Example

HTML

<h4>ngMouseLeave Example</h4>
<div ng-controller="HomeController">
    <div style="width:150px;height:50px;background-color:gray" ng-mouseleave="count = count + 1" ng-init="count=0">
    </div>
    <br /> Count of mouse leave on above div object: {{count}}
</div>

Controller code is same as above example.

Output



ngMousemove

The ngMousemove directive allows us to specify the behavior of element(s) on mouse move event. This directive has highest priority.

Example

HTML:

<h4>ngMouseMove Example</h4>
<div ng-controller="HomeController">
    <div style="width:150px;height:50px;background-color:gray" ng-mousemove="x=$event.screenX;y=$event.screenY" ng-init="x=0;y=0;">
    </div>
    <br /> X: {{x}}
    <br /> Y: {{y}}
</div>

Controller code is same as above example.

Output



ngMouseover

The ngMouseover directive allows us to specify the behavior of element(s) on mouse over event. This directive has highest priority.

Example

HTML

<h4>ngMouseOver Example</h4>
<div ng-controller="HomeController">
    <div style="width:150px;height:50px;background-color:gray" ng-mouseover="count = count + 1;" ng-init="count=0">
    </div>
    <br /> Count of mouse over on above div object: {{count}}
</div>

Controller code is same as above example.

Output



ngMouseup

The ngMouseup directive allows us to specify the behavior of element(s) on mouse up event. This directive has highest priority.

Example

HTML

<h4>ngMouseUp Example</h4>
<div ng-controller="HomeController">
    <button ng-mouseup="count = count + 1" ng-init="count=0">
        Mouse Up
    </button>
    <br /> Count of mouse Up on above button: {{count}}
</div>

Controller code is same as above example.

Output



Summary

This article is for helping us to learn various directives to support mouse event.