AngularJS | ng-dblclick Directive

The ng-dblclick Directive in AngluarJS is used to apply custom behavior to when an element is clicked double. It can be used to show or hide some element or it can popup alert or to change the color of text when it is clicked twice.

Syntax:

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

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



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>ng-dblclick Directive</title>
  
    <script src=
    </script>
</head>
   
<body ng-app="geek" style="text-align:center">
      
    <h1 style="color:green">GeeksforGeeks</h1>
      
    <h2>ng-dblclick Directive</h2>
      
    <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>

chevron_right


Output:
Before double click:
ngdblclick
After double click:
ngdblclick

Example 2: This example changes the text color after clicking it doubled.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>ng-dblclick Directive</title>
  
    <script src=
    </script>
      
    <style type="text/css">
        .green {
            color: green;
        }
    </style>
</head>
  
<body ng-app style="text-align:center">
      
    <h1 style="color:green">GeeksforGeeks</h1>
      
    <h2>ng-click Directive</h2>
      
    <div>
        <p ng-dblclick="col=!col" ng-class="{green:col}">
            GeeksforGeeks is the computer science
            portal for geeks.
        </p>
    </div>
</body>
  
</html>

chevron_right


Output:
Before double click:
ngclick
After double click:
ngclick



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.