AngularJS tiene sus propios eventos directivas HTML.
Eventos AngularJS
Puede añadir AngularJS detectores de eventos a sus elementos HTML mediante el uso de 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 permite ejecutar funciones AngularJS en ciertos eventos de usuario.
Un evento AngularJS no se sobreponen a un evento HTML, se ejecutará ambos eventos.
Eventos del ratón
Los eventos de ratón se producen cuando el cursor se mueve sobre un elemento, en este orden:
- ng-MouseEnter
- ng-mouseover
- ng-mousemove
- ng-mouseleave
O cuando se hace clic en un botón del ratón sobre un elemento, en este orden:
- ng-mousedown
- ng-mouseup
- ng-clic
Se pueden añadir eventos de ratón en cualquier elemento HTML.
Ejemplo
Aumentar la variable de recuento cuando el ratón pasa 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> Inténtalo tú mismo " La Directiva ng-clic
El ng-click Directiva define AngularJS código que se ejecutará cuando se hace 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> Inténtalo tú mismo " También puede hacer referencia 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> Inténtalo tú mismo " Alternar, Verdadero / Falso
Si desea mostrar una sección de código HTML cuando se hace clic en un botón, y se esconden cuando se hace clic en el botón de nuevo, como un menú desplegable, haga el botón se comporta como un interruptor de palanca:
Menú:
Ejemplo
<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> Inténtalo tú mismo " El showMe variables comienza como el valor booleano false .
El myFunc función establece el showMe variable al contrario de lo que es, mediante el uso de la ! (No) del operador.
$ Evento de objetos
Puede pasar el $event objeto como un argumento cuando se llama a la función.
El $event objeto contiene 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>
Inténtalo tú mismo "