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.
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.
Following is the syntax of using ng-dblclick event in angularjs applications.
<element ng-dblclick="expression">
...your code...
</element>
Following is the example of using ng-dblclick event in angularjs applications.
<!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.
Following is the result of using ng-dblclick event in angularjs applications.
