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

Por: james hartman james hartman
Hours Actualizado

⚡ Resumen inteligente

Los eventos de AngularJS permiten que una aplicación web responda a la interacción del usuario, como clics del ratón, pulsaciones de teclas y acciones de desplazamiento del cursor. Las directivas como ng-click, ng-show y ng-hide vinculan este comportamiento de forma declarativa en el marcado, en lugar de hacerlo mediante detectores de eventos DOM manuales.

  • 🖱️ Manejo de clics: ng-click adjunta una expresión o función de controlador a un elemento, generalmente un botón.
  • 👁️ Visualización condicional: ng-show renderiza un elemento cuando su expresión es verdadera, mientras que ng-hide lo elimina cuando la expresión es verdadera.
  • ???? Mecanismo: Ambas directivas activan o desactivan la clase CSS integrada ng-hide, que establece la propiedad display en none, de modo que el elemento permanece en el DOM.
  • 🔗 Limitación del alcance: Una variable miembro colocada en $scope controla la visibilidad, y cambiarla dentro de un controlador actualiza la vista inmediatamente.
  • 📋 Rango de directivas: Dieciocho directivas de escucha cubren los eventos blur, change, focus, keyboard, mouse, paste y submit.
  • ⚠️ Estado del soporte: AngularJS llegó al final de su ciclo de vida el 31 de diciembre de 2021, por lo que los nuevos proyectos deberían optar por la versión moderna de Angular.
Descubre más

AngularJS ng-click ng-show ng-hide Directivas

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.

Directiva ng-click en AngularJS

<!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:

ng-clic en AngularJS

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.

ng-clic en AngularJS

¿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.

Directiva ng-show en AngularJS

<!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:

Directiva ng-show en AngularJS

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.

Directiva ng-show en AngularJS

ARTÍCULOS RELACIONADOS

¿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.

Directiva ng-hide en AngularJS

<!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:

Directiva ng-hide en AngularJS

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

Directiva ng-hide en AngularJS

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í.

Aspecto ng-mostrar ng-ocultar ng-si
Elemento visible cuando La expresión es verdadera La expresión es falsa La expresión es verdadera
Elemento en el DOM Siempre Siempre Solo mientras sea cierto
Método utilizado Toggles .ng-hide clase Toggles .ng-hide clase Crea y destruye el elemento.
Alcance infantil Comparte el ámbito principal Comparte el ámbito principal Crea un nuevo ámbito secundario
Los vigilantes cuando están ocultos Todavía activo Todavía activo Remoto
Mejores para Cambio frecuente de contenido de luz Condiciones invertidas Contenido explícito mostrado rara vez

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

Pase el reservado $event variable, como en ng-click="handle($event)"El controlador recibe entonces el evento nativo y puede leer el objetivo, las coordenadas o llamar a preventDefault.

ng-repeat crea un ámbito secundario por cada elemento, por lo que asignar un tipo primitivo dentro del controlador actualiza solo ese secundario. Escriba en una propiedad de objeto en el ámbito principal o utilice $parentpara hacer visible el cambio desde fuera.

En parte. AI herramientas convierten ng-click a (click) y ng-show a *ngIf Funciona de forma fiable, pero la lógica dependiente del ámbito y los enlaces bidireccionales requieren una revisión manual, ya que el ámbito de AngularJS no tiene un equivalente directo en Angular.

Los asistentes de IA detectan rápidamente las causas habituales: falta la directiva ng-app, el nombre del controlador no coincide con el registro del módulo o hay un error tipográfico en el atributo de la directiva. La solución propuesta aún necesita ser probada en el navegador.

No. AngularJS solo proporciona las directivas ng-show, ng-hide y ng-if. No existe la directiva ng-visible, y hacer referencia a ella no produce ningún efecto porque AngularJS ignora los atributos no reconocidos.

Resumir este post con: