AngularJS ng-dblclick Event (Double Click) Example

Here we will learn what is ng-dblclick event in angularjs, use of ng-dblclick event in angularjs, how to raise event on double click of button in angularjs with example.

AngularJS ng-dblclick Event

In angularjs ng-dblclick event directive is used to define double click event for html elements. In case if you want to fire a function or other event on double click of HTML element then we need to use this event. 

Syntax of AngularJS ng-dblclick Event / Function

Following is the syntax of using ng-dblclick event in angularjs applications.

 

<element ng-dblclick="expression">

...your code...

</element>

AngularJS ng-dblclick Event Directive Example

Following is the example of using ng-dblclick event in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-dblclick Event Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('ngdblclickApp', []);

app.controller('ngdblclickCtrl', function ($scope) {

$scope.clkcount = 0;

$scope.getdetails = function () {

$scope.clkcount = $scope.clkcount + 1;

}

});

</script>

</head>

<body>

<div ng-app="ngdblclickApp" ng-controller="ngdblclickCtrl">

<h2>AngularJs ng-dblclick Event Directive Example</h2>

<input type="button" style="cursor:pointer" value="Double Click Here" ng-dblclick ="getdetails()" /><br /><br />

<span style="color:Red">No. of Times Event Called: {{clkcount}}</span>

</div>

</body>

</html>

If you observe above example we added ng-dblclick event to button and it will raise event only when we click double times in angularjs application.

Output of AngularJS ng-dblclick Event Example

Following is the result of using ng-dblclick event in angularjs applications.

 

Angularjs ng-dblclick Event Directive Example Result