Directivas AngularJS ng-click, ng-show y ng-hide

Eventos de AngularJS

Eventos de AngularJS Son las funcionalidades que permiten a las aplicaciones web interactuar con las entradas del usuario, como clics del ratón, entradas de teclado y el desplazamiento del cursor. En las aplicaciones web, es necesario gestionar los eventos para realizar tareas y acciones específicas, y cada uno se activa cuando el usuario realiza la acción correspondiente.

Al crear aplicaciones web, tarde o temprano su aplicación necesitará gestionar eventos del DOM, como clics y movimientos del ratón, pulsaciones de teclado y eventos de cambio. AngularJS Proporciona directivas que gestionan estos eventos de forma declarativa.

Por ejemplo, si un botón de la página debe procesar algo al hacer clic, la directiva de evento ng-click proporciona ese mecanismo.

⚠️ Aviso de soporte: AngularJS alcanzó fin de vida el 31 de diciembre de 2021 y no recibe más parches ni correcciones de seguridad del equipo de Angular. Las directivas que se indican a continuación siguen siendo válidas para el mantenimiento de las aplicaciones AngularJS 1.x existentes; para trabajos nuevos, utilice las directivas modernas. Angulardonde estas directivas se reemplazan por enlaces de eventos como (click) y por *ngIf.

¿Qué es la directiva ng-click en AngularJS?

El “directiva ng-click” En AngularJS, se aplica un comportamiento personalizado cuando se hace clic en un elemento HTML. Normalmente se usa en botones, ya que son el lugar más común para adjuntar respuestas de clic, y también se usa para mostrar alertas al hacer clic.

Sintaxis de ng-click en AngularJS

<element
 ng-click="expression">
</element>

Ejemplo de ng-click en AngularJS

En este ejemplo de ng-click, una variable de contador se incrementa cada vez que el usuario hace clic en un botón.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Code Explicación:

1. La directiva ng-init establece la variable local. count a 0.
2. La directiva ng-click en el botón incrementa count en 1 por cada clic.
3. La interpolación {{count}} Muestra el valor actual al usuario.

Salida:

Se muestra el botón Incrementar y el contador es inicialmente cero. Al hacer clic en él, el valor se incrementa, como se muestra en la imagen a continuación.

¿Qué es la directiva ng-show en AngularJS?

El Directiva ng-show muestra u oculta un valor dado HTML elemento basado en la expresión proporcionada al atributo ng-show. Internamente, el elemento se muestra u oculta eliminando o agregando el .ng-hide Clase CSS, una clase predefinida que establece display a none.

Sintaxis de ng-show en AngularJS

<element
 ng-show="expression">
</element>

Ejemplo de ng-show en AngularJS

Este ejemplo utiliza ng-show para mostrar un elemento oculto.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code Explicación:

1. La directiva ng-click en el botón hace referencia a un ShowHide función definida en el controlador DemoController.
2. El atributo ng-show se adjunta al div que contiene el texto Angular. Este es el elemento cuya visibilidad se controla.
3. En el controlador, el IsVisible La variable miembro se coloca en el objeto de ámbito y se inicializa a false, por lo que el div se oculta cuando la página se carga por primera vez. Con ng-show, un valor de su verdadero muestra el elemento y false lo oculta.
4. El ShowHide conjuntos de funciones IsVisible a verdadero para que el div se vuelva visible.

Salida:

El div que contiene el texto no se muestra inicialmente, porque IsVisible comienza como falso. Haciendo clic Mostrar Angular Se establece en verdadero y el texto se vuelve visible.

¿Qué es la directiva ng-hide en AngularJS?

El directiva ng-ocultar oculta un elemento cuando su expresión se evalúa como VERDADERA y muestra el elemento cuando la expresión es FALSA, lo contrario exacto de ng-show. Internamente utiliza el mismo .ng-hide Clase CSS.

Sintaxis de ng-hide en AngularJS

<element
 ng-hide="expression">
</element>

Ejemplo de ng-hide en AngularJS

Este ejemplo reproduce el ejemplo de ng-show, de modo que ambas directivas pueden compararse directamente.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code Explicación:

1. La directiva ng-click en el botón hace referencia a ShowHide Funcionar en DemoController.
2. El ng-ocultar El atributo se adjunta al div que contiene el texto Angular.
3. IsVisible se inicializa a false. Debido a que se trata de ng-hide en lugar de ng-show, un valor falso significa que el div está oculto. Visible cuando la página se carga por primera vez.
4. El ShowHide conjuntos de funciones IsVisible a verdadero, lo que oculta el div.

Salida:

El div se muestra inicialmente porque se pasa false a ng-hide. Al hacer clic Ocultar Angular pasa verdadero y la palabra desaparece.

ng-show vs ng-hide vs ng-if: diferencias clave

Tres directivas controlan si el usuario ve un elemento, y la elección entre ellas afecta tanto al comportamiento como al rendimiento de la visualización. Las dos primeras solo modifican una clase CSS, por lo que el elemento siempre está presente en la página; la tercera añade y elimina el elemento en sí.

Utilice `ng-show` o `ng-hide` cuando un elemento se muestre u oculte con frecuencia, ya que el elemento nunca se reconstruye y el cambio solo implica una modificación de clase. Utilice `ng-if` para secciones costosas que se muestren con poca frecuencia, puesto que al eliminar el elemento también se eliminan sus observadores y se reduce el coste de digestión en cada ciclo.

Directivas de escucha de eventos de AngularJS

Puedes agregar detectores de eventos de AngularJS a elementos HTML utilizando uno o más de estos directivas:

• ng-desenfoque
• ng-cambio
• ng-clic
• ng-copia
• corte ng
• ng-dblclick
• ng-enfoque
• ng-keydown
• ng-pulsación de tecla
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-movimiento del mouse
• ng-mouseover
• ng-mouseup
• pasta ng
• ng-enviar

Cada directiva acepta una expresión, y el evento del navegador sin procesar está disponible dentro de ella como $event cuando el controlador necesita detalles como la tecla pulsada o las coordenadas del clic.

Preguntas Frecuentes