ng-mouseenter directive AngularJs

What is ng-mouseenter directive? Why we use it?

The ng-mouseenter is used to specify to perform the custom behaviour on mouse enter event.
If you want to add and fire a mouse enter event on HTML button that time we need to use these events.

When you mouse enter on focused button in the below example, the ngMouseenter function get called. 

As you can see in the below controller function "mouseenter" get called after ngMouseenter on button.  

The example as,
//The HTML Code sample
<button ng-mouseenter="mouseenter(IsActive)">NG-MOUSEENTER </button>

//The AngularJs code sample:
var app = angular.module('myApp', []);
 app.controller('ngClickCtrl', function ($scope) {
            $scope.firstName = "Anil";
            $scope.lastName = "Singh";
            $scope.IsActive = false;

            $scope.mouseenter = function (IsActive) {
                if (!IsActive) {
                    $scope.IsActive = true;
                } else {
                    $scope.IsActive = false;
                }
            };
 });

//The AngularJs and HTML code
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>What is ng-mouseenter directive? Why we use it?</title>
    @*<script src="https://code.angularjs.org/1.4.1/angular.js"></script>*@
    <script>
        var app = angular.module('myApp', []);
        app.controller('ngClickCtrl', function ($scope) {
            $scope.firstName = "Anil";
            $scope.lastName = "Singh";
            $scope.IsActive = false;

            $scope.mouseenter = function (IsActive) {
                if (!IsActive) {
                    $scope.IsActive = true;
                } else {
                    $scope.IsActive = false;
                }
            };
        });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="ngClickCtrl">
        <div>
            First Name:
            <input type="text" ng-model="firstName"> Last Name:
            <input type="text" ng-model="lastName">
            <button ng-mouseup="mouseenter(IsActive)">NG-MOUSEENTER </button>
            
        </div>
        <div>
            <div ng-show="IsActive"> <h3>Full Name: {{firstName + " " + lastName}} </h3></div>
        </div>
    </div>
</body>
</html>

The live output as,

About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book