Eventos de AngularJS

❮ Anterior Próximo ❯

AngularJS tiene sus propias directivas de eventos HTML.

Eventos de AngularJS

Puede agregar detectores de eventos de AngularJS a sus elementos HTML usando una o más de estas directivas:

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

Las directivas de eventos nos permiten ejecutar funciones de AngularJS en ciertos eventos de usuario.

Un evento AngularJS no sobrescribirá un evento HTML, ambos eventos se ejecutarán.

Eventos de ratón

Los eventos del mouse ocurren cuando el cursor se mueve sobre un elemento, en este orden:

de mouseover
de-mouseenter
ng-move del ratón
ng-mouseleave

O cuando se hace clic con el botón del mouse en un elemento, en este orden:

de-mousedown
de-mouseup
de clic

Puede agregar eventos de mouse en cualquier elemento HTML.

Ejemplo

Aumente la variable de conteo cuando el mouse se mueva sobre el elemento H1:

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

La directiva del clic

La ng-click 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">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

También puede referirse a una función:

Ejemplo

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click me!</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>

Alternar, Verdadero/Falso

Si desea mostrar una sección de código HTML cuando se hace clic en un botón y ocultarla cuando se vuelve a hacer clic en el botón, como un menú desplegable, haga que el botón se comporte como un interruptor de palanca:

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
  <div>Pesce</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>

La showMevariable comienza como el valor booleano false.

La myFuncfunción establece la showMevariable en el opuesto de lo que es, mediante el uso del !operador (no).

$objeto de evento

Puede pasar el $eventobjeto como argumento al llamar a la función.

El $eventobjeto contiene el objeto de evento del navegador:

Ejemplo

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{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>

❮ Anterior Próximo ❯

Tutorial

Ejemplos

Referencia

Eventos de AngularJS