La directiva ng-dblclick en AngluarJS se usa para aplicar un comportamiento personalizado cuando se hace doble clic en un elemento. Se puede usar para mostrar u ocultar algún elemento o puede mostrar una alerta emergente o cambiar el color del texto cuando se hace clic dos veces.
Sintaxis:
<element ng-dblclick="expression"> Content... </element>
Ejemplo 1: este ejemplo utiliza la directiva ng-dblclick para mostrar un mensaje de alerta después de hacer doble clic en el botón.
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>
<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>
Salida:
Antes de hacer doble clic:
Después de hacer doble clic:
Ejemplo 2: este ejemplo cambia el color del texto después de hacer doble clic.
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>
<h2>ng-dblclick Directive</h2>
<div>
<p ng-dblclick="col=!col" ng-class="{green:col}">
GeeksforGeeks is the computer science
portal for geeks.
</p>
</div>
</body>
</html>
Salida:
Antes de hacer doble clic:
Después de hacer doble clic:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA