Open In App

AngularJS ng-dblclick Directive

Last Updated : 03 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </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=
    </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>


Output:

 



Similar Reads

How to display a message on dblclick event on all paragraphs of a page using jQuery ?
The purpose of this article is to display a message to the double click event on all paragraphs on a page. Whenever you double-click on any of the paragraphs then the message will appear. Used method in jQuery: dblclick(): This method is used to trigger the dblclick event, or attaches a function to run when a double click event occurs. Syntax: $(se
1 min read
jQuery dblclick() Method
jQuery dblclick() is an inbuilt method that is used to trigger the double-click event to occur. This method occurs when the selected element will be double-clicked.  Syntax:$(selector).dblclick(args);Here "selector" is the selected element.  Parameters: It accepts an optional parameter "args" which specifies a function that does a specific task aft
2 min read
AngularJS ng-show Directive
The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. Syntax: &lt;element ng-show="expression"&gt; Contents... &lt;/element&gt; Parameter Value: expre
2 min read
AngularJS ng-init Directive
The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. Syntax: &lt;element ng-init = "expression"&gt; ... &lt;/element&gt;Example: This example descr
1 min read
AngularJS ng-if Directive
The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it is false then the element is removed and if it is
2 min read
AngularJS ng-keypress Directive
The ng-keypress Directive in AngluarJS is used to apply custom behavior on a keypress event. It is mainly used to specify what to do when the keyboard is utilized with a particular HTML element. The order of sequence that the key is pressed is Keydown, Keypress, and keyup. It is supported by &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elemen
2 min read
AngularJS ng-keydown Directive
The ng-keydown Directive in AngluarJS is used to apply custom behavior on a keydown event. This directive will not be overridden by the element's original onkeydown event. Both the onkeydown event &amp; the ng-keydown Directive will be executed. It is supported by &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elements. Syntax: &lt;element ng-k
2 min read
AngularJS ng-keyup Directive
The ng-keyup Directive in AngluarJS is used to apply custom behavior on a keyup event. It is supported by &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elements. Syntax: &lt;element ng-keyup="expression"&gt; Contents... &lt;/element&gt; Parameter: expression: When a keypress is finished, then the followed expression will be executed.Example 1:
2 min read
AngularJS ng-href Directive
The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will most likely return a 404 error while ng-href direct
2 min read
AngularJS ng-focus Directive
The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by &lt;a&gt;, &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elements. Syntax: &lt;element ng-focus="expression"&gt; Contents...
1 min read