It is used to define an expression that execute when a mouse cursor enters the element.
Sample coding for ng-mouseenter directive in AngularJS:
Tryit<!DOCTYPE html><html><head><title>Wikitechy AngularJS Tutorials</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
angular.min.js"></script></head><bodyng-app=""><h2>ng-mouseenter directive in AngularJs</h2><buttonng-mouseenter="count = count + 1"ng-init="count=0">
Mouse over here!
</button><h3> The mouseenter count : {{ count }} </h3></body></html>
Code Explanation for ng-mouseenter directive in AngularJS:
AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
The AngularJS application is defined by ng-app="". The application runs inside the <body> tag.It’s also used to define a <body> tag as a root element.
The ng-mouseenter= “count=count+1” is used to increase the count variable by one,every time the mouse cursor enters the button element.
The ng-init="count = 0" is used to define the initial value of the count variable is 0.
The {{ count }} used to dynamically bind the count variable value when the user enter the mouse cursor on the button element.
Sample Output for ng-mouseenter directive in AngularJS:
The output displays that a mouse cursor enters on a “Mouse over here!” button.
The output shows that the content “The mouseenter count:1” when the mouse cursor enters the “Mouse over here!” button. Here the variable “count” will increased a value by 1, every time a mouse cursor enters the “Mouse over here!” button.
