Al crear aplicaciones basadas en la web, tarde o temprano, su aplicación necesitará manejar eventos DOM como clics del mouse, movimientos, pulsaciones de teclado, eventos de cambio, etc.
AngularJS puede agregar funcionalidad que se puede usar para manejar tales eventos.
Por ejemplo, si hay un botón en la página y desea procesar algo cuando se hace clic en el botón, podemos usar la directiva de eventos ng-click.
Analizaremos las directivas de eventos en detalle durante este curso.
En este tutorial, aprenderá:
- ¿Qué es la directiva ng-click?
- ¿Qué es la directiva ng-show?
- ¿Qué es la directiva ng-hide?
¿Qué es la directiva ng-click?
La "directiva ng-click" se utiliza para aplicar un comportamiento personalizado cuando se hace clic en un elemento en HTML. Esto se usa normalmente para botones porque es el lugar más común para agregar eventos que responden a los clics realizados por el usuario.
Veamos un ejemplo simple de cómo podemos implementar el evento de clic.
En este ejemplo, tendremos una variable de contador que incrementará su valor cuando el usuario haga clic en un botón.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Explicación del código:
- Primero usamos la directiva ng-init para establecer el valor de un recuento de variables locales en 0.
- A continuación, presentamos la directiva de eventos ng-click al botón. En esta directiva, estamos escribiendo código para incrementar el valor de la variable de conteo en 1.
- Aquí mostramos el valor de la variable de recuento al usuario.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida anterior,
- Podemos ver que se muestra el botón "Incremento" y el valor de la variable de conteo es inicialmente cero.
- Cuando hace clic en el botón Incrementar, el valor del recuento se incrementa en consecuencia, como se muestra en la imagen de salida a continuación.
¿Qué es la directiva ng-show?
La directiva ng-Show se usa para mostrar u ocultar un elemento HTML dado según la expresión proporcionada al atributo ngShow. En segundo plano, el elemento se muestra u oculta al eliminar o agregar la clase CSS .ng-hide al elemento.
En segundo plano, el elemento se muestra u oculta al eliminar o agregar la clase CSS .ng-hide al elemento.
Veamos un ejemplo de cómo podemos usar la directiva "ngshow event" para mostrar un elemento oculto.
Event Registration Guru99 Global Event
Angular
Explicación del código:
- Adjuntamos la directiva de evento ng-click al elemento del botón. Aquí estamos haciendo referencia a una función llamada "ShowHide" que está definida en nuestro controlador - DemoController.
- Adjuntamos el atributo ng-show a una etiqueta div que contiene el texto Angular. Esta es la etiqueta que vamos a mostrar / ocultar según el atributo ng-show.
-
En el controlador, estamos adjuntando la variable miembro "IsVisible" al objeto de alcance. Este atributo se pasará al atributo angular ng-show (paso # 2) para controlar la visibilidad del control div. Inicialmente, configuramos esto en falso para que cuando la página se muestre por primera vez, la etiqueta div esté oculta.
Nota: - Cuando los atributos ng-show se establecen en verdadero, el control posterior, que en nuestro caso es la etiqueta div, se mostrará al usuario. Cuando el atributo ng-show se establece en falso, el control se ocultará al usuario.
- Estamos agregando código a la función ShowHide que establecerá la variable miembro IsVisible en verdadero para que la etiqueta div se pueda mostrar al usuario.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Salida: 1
De la salida,
- Inicialmente puede ver que la etiqueta div que tiene el texto "AngularJS" no se muestra y esto se debe a que el objeto de alcance isVisible se establece inicialmente en falso, que luego se pasa a la directiva ng-show de la etiqueta div.
- Cuando hace clic en el botón "Mostrar AngularJS", cambia la variable miembro isVisible para que sea verdadera y, por lo tanto, el texto "Angular" se vuelve visible para el usuario. El siguiente resultado se mostrará al usuario.
La salida ahora muestra la etiqueta div con el texto angular.
¿Qué es la directiva ng-hide?
Con la directiva ng-hide, un elemento se ocultará si la expresión es TRUE. Si la expresión es FALSA, se mostrará el elemento. En segundo plano, el elemento se muestra u oculta al eliminar o agregar la clase CSS .ng-hide al elemento.
Por otro lado, con ng-hide, el elemento se oculta si la expresión es verdadera y se mostrará si es falsa.
Veamos un ejemplo similar al que se muestra para ngShow para mostrar cómo se puede usar el atributo ngHide.
Event Registration Guru99 Global Event
Angular
Explicación del código:
- Adjuntamos la directiva de evento ng-click al elemento del botón. Aquí estamos haciendo referencia a una función llamada ShowHide que está definida en nuestro controlador - DemoController.
- Adjuntamos el atributo ng-hide a una etiqueta div que contiene el texto Angular. Esta es la etiqueta, que vamos a mostrar / ocultar según el atributo ng-show.
- En el controlador, estamos adjuntando la variable miembro isVisible al objeto de alcance. Este atributo se pasará al atributo angular ng-show para controlar la visibilidad del control div. Inicialmente, configuramos esto en falso para que cuando la página se muestre por primera vez, la etiqueta div esté oculta.
- Estamos agregando código a la función ShowHide que establecerá la variable miembro IsVisible en verdadero para que la etiqueta div se pueda mostrar al usuario.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida,
- Inicialmente puede ver que la etiqueta div que tiene el texto "AngularJs" se muestra inicialmente porque el valor de propiedad de false se envía a la directiva ng-hide.
- Cuando hacemos clic en el botón "Ocultar angular", el valor de la propiedad true se enviará a la directiva ng-hide. Por lo tanto, se mostrará la siguiente salida, en la que se ocultará la palabra "Angular".
Directivas de escucha de eventos de AngularJS
Puede agregar oyentes de eventos AngularJS a sus elementos HTML mediante el uso de una o más de estas directivas:
- ng-blur
- ng-change
- ng-clic
- 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
Resumen
- Las directivas de eventos se utilizan en Angular para agregar código personalizado para responder a eventos generados por la intervención del usuario, como clics de botones, clics de teclado y mouse, etc.
- La directiva de eventos más común es la directiva ng-click que se usa para manejar eventos de clic. El uso más común de esto es para clics de botones en los que se puede agregar código para responder a un clic de botón.
- Los elementos HTML también se pueden ocultar o mostrar al usuario en consecuencia mediante el uso de los atributos angulares ng-show y ng-hide.