AngularJS ng-dblclick Directive

Last Updated : 03 Aug, 2022

The ng-dblclick Directive in AngluarJS is used to apply custom behavior when an element is clicked double. It can be used to show or hide some element or it can popup an alert or change the color of text when it is clicked twice. This means that the element’s original ondblclick event will not be overridden by this directive, both will be executed.

Syntax:

<element ng-dblclick="expression"> 
    Content... 
</element>

Example 1: This example uses the ng-dblclick Directive in AngularJS to display the alert message after clicking the button doubled.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-dblclick Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
 
<body ng-app="geek" style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-dblclick Directive</h3>
    <div ng-controller="app">
        <button>
            <a href="" ng-dblclick="alert()">
                Click Here
            </a>
        </button>
    </div>
 
    <script>
        var app = angular.module("geek", []);
        app.controller('app', ['$scope', function ($app) {
            $app.alert = function () {
                alert("This is an example of ng-dblclick");
            }
        }]);
    </script>
</body>
</html>

Output:

Example 2: This example illustrates the ng-dblclick Directive in AngularJS to change the text color after clicking it doubled.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-dblclick Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <style type="text/css">
        .green {
            color: green;
        }
    </style>
</head>
 
<body ng-app style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-dblclick Directive</h3>
    <div>
        <p ng-dblclick="col=!col" ng-class="{green:col}">
            GeeksforGeeks is the computer science
            portal for geeks.
        </p>
 
    </div>
</body>
</html>