La directiva ng-mouseleave en AngularJS se usa para aplicar un comportamiento personalizado cuando ocurre un evento de abandono del mouse en un elemento HTML específico. Se puede usar para mostrar una alerta emergente cuando el mouse deja una posición específica en un elemento HTML. Es compatible con todos los elementos HTML.
Sintaxis:
<element ng-mouseleave="expression"> content ... </element>
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.6.9/angular.min.js"></script>
<head>
<title>ng-mouseleave Directive</title>
</head>
<body ng-app="" style="text-align: center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-mouseleave Directive</h2>
<div>price :</div>
<div ng-hide="leave" ng-mouseenter="leave=true"><span
class="amount">$ {{price}}</span></div>
<div ng-show="leave" ng-mouseleave="leave=false">
<input type="number" class="form-control"
ng-model="price" ng-init="price=250" />
</div>
</body>
</html>
Salida:
Antes de Mouseleave:
Después de Mouseleave:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.6.9/angular.min.js"></script>
<head>
<title>ng-mouseleave Directive</title>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-mouseleave Directive</h2>
<div ng-controller="app">
Input: <input type="text" ng-mouseleave="alert()"
ng-model="click" />
</div>
<script>
var app = angular.module("app", []);
app.controller('app', ['$scope', function ($scope) {
$scope.click = 'geeksforgeeks';
$scope.alert = function () {
alert($scope.click);
}
}]);
</script>
</body>
</html>
Salida:
Antes de Mouseleave:
Después de Mouseleave:
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