ng-mouseover event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mousedown, mouseover, mouseover etc, in this post we shall see on how to handle the mouseover event using AngularJS

AngularJS provides ng-mouseover directive to handle mouse down events raised by the user, mouseover event can be handled by associating the ng-mouseover directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-mouseover directive to handle mouseover events raised by the user.

ng-mouseover directive

As the name suggests the ng-mouseover directive is used to handle mousehover events from controls in the view layer. The ng-mouseover directive can be associated with any type of controls like buttons, links, div panels etc.

The syntax for the ng-mouseover directive is as follows

ng-mouseover = “<Function to be called in the controller layer>”

The function is defined in the controller under $scope, when the user triggers the event the function associated with the ng-mouseover directive gets executed and performs appropriate updates in the model ($scope) and the view.

The following example shows how the ng-mouseover directive associated with the Hover Mouse button shows and hides the Name based on the users mouse movement.