Eventos de AngularJS

AngularJS tiene sus propias instrucciones de eventos HTML.

Eventos de AngularJS

Puedes agregar un controlador de eventos de AngularJS a tus elementos HTML utilizando una o más de las siguientes instrucciones:

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

La instrucción de evento permite que ejecutemos funciones de AngularJS en ciertos eventos de usuarios.

Los eventos de AngularJS no sobrescriben los eventos HTML, ambos se ejecutarán.

Eventos de ratón

Cuando el cursor se mueve sobre el elemento, ocurrirán los eventos de ratón en el siguiente orden:

  • ng-mouseover
  • ng-mouseenter
  • ng-mousemove
  • ng-mouseleave

O, cuando se hace clic en el elemento, se desencadenarán en el siguiente orden:

  • ng-mousedown
  • ng-mouseup
  • ng-click

Puedes agregar eventos de ratón a cualquier elemento HTML.

Ejemplo

Aumenta la variable count cuando el ratón se mueve sobre el elemento H1:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">¡Mueve el ratón sobre mí!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

¡Prueba por ti mismo!

Directiva ng-click

ng-click La directiva define el código AngularJS que se ejecutará cuando se haga clic en el elemento.

Ejemplo

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">¡Haz clic aquí!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

¡Prueba por ti mismo!

También puedes invocar una función:

Ejemplo

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">¡Haz clic aquí!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
  $scope.myFunction = function() {
    $scope.count++;
  }
});
</script>

¡Prueba por ti mismo!

Conmutación, verdadero / falso

Si deseas que se muestre parte del código HTML al hacer clic en el botón y se oculte al hacer clic nuevamente, como en un menú desplegable, haz que el botón se comporte como un interruptor de encendido / apagado:

¡Haz clic aquí!

Ejemplo

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">¡Haz clic aquí!</button>  
<div ng-show="showMe">  
  <h1>Menú：</h1>  
  <div>Pizza</div>  
  <div>Pasta</div>  
  <div>Mariscos</div>  
</div>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.showMe = false;  
  $scope.myFunc = function() {  
    $scope.showMe = !$scope.showMe;  
  }  
});  
</script>

¡Prueba por ti mismo!

showMe La variable comienza como un valor booleano false.

myFunc La función utilizando !Operador (no) lógico, que invoca showMe La variable se establece en el valor opuesto a su valor actual.

$event objeto

Se puede usar al llamar a la función $event El objeto se transmite como parámetro.

$event El objeto contiene el objeto de eventos del navegador:}}

Ejemplo

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">¡Mueve el ratón sobre mí!</h1>
<p>Coordenadas: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

¡Prueba por ti mismo!