Diretivas AngularJS ng-click, ng-show e ng-hide

Por: James Hartmann James Hartmann
Hours Atualização do

⚡ Resumo Inteligente

Os eventos do AngularJS permitem que um aplicativo web responda à entrada do usuário, como cliques do mouse, pressionamentos de teclas e ações de passar o mouse sobre um elemento. Diretivas como ng-click, ng-show e ng-hide vinculam esse comportamento declarativamente na marcação, em vez de por meio de ouvintes DOM manuais.

  • 🖱️ Tratamento de cliques: O ng-click associa uma expressão ou função de controlador a um elemento, geralmente um botão.
  • 👁️ Exibição condicional: ng-show exibe um elemento quando sua expressão é verdadeira, enquanto ng-hide o remove quando a expressão é verdadeira.
  • ???? Mecanismo: Ambas as diretivas alternam a classe CSS ng-hide integrada, que define a propriedade display como none, fazendo com que o elemento permaneça no DOM.
  • 🔗 Vinculação de escopo: Uma variável de membro colocada em `$scope` controla a visibilidade, e alterá-la dentro de um manipulador atualiza a visualização imediatamente.
  • 📋 Âmbito da diretiva: Dezoito diretivas de ouvinte abrangem eventos de desfoque, alteração, foco, teclado, mouse, colar e enviar.
  • ⚠️ Status do suporte: O AngularJS chegou ao fim de sua vida útil em 31 de dezembro de 2021, portanto, novos projetos devem ter como alvo o Angular moderno.
Saiba Mais

AngularJS ng-click ng-show ng-hide Diretivas

Eventos AngularJS

Eventos AngularJS São as funcionalidades que permitem que as aplicações web interajam com as entradas do usuário, como cliques do mouse, entrada de teclado e passagem do cursor sobre o objeto. Os eventos devem ser tratados nas aplicações web para executar tarefas e ações específicas, e cada evento é acionado quando o usuário realiza a ação correspondente.

Ao criar aplicações web, mais cedo ou mais tarde sua aplicação precisará lidar com eventos DOM, como cliques e movimentos do mouse, pressionamentos de teclado e eventos de alteração. AngularJS Fornece diretrizes que lidam com esses eventos de forma declarativa.

Por exemplo, se um botão na página deve executar alguma ação ao ser clicado, a diretiva de evento ng-click fornece esse gancho.

⚠️ Aviso de suporte: AngularJS alcançou fim da vida em 31 de dezembro de 2021 e não recebe mais patches ou correções de segurança da equipe do Angular. As diretivas abaixo permanecem válidas para a manutenção de aplicativos AngularJS 1.x existentes; para novos projetos, use a versão moderna. Angular, onde essas diretivas são substituídas por associações de eventos, como (click) e por *ngIf.

O que é a diretiva ng-click no AngularJS?

O “diretiva ng-click” Em AngularJS, aplica-se um comportamento personalizado quando um elemento HTML é clicado. Normalmente, é usado em botões, já que esses são os locais mais comuns para associar respostas de clique, e também é usado para exibir alertas ao clicar.

Sintaxe de ng-click em AngularJS

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

Exemplo de ng-clique em AngularJS

Neste exemplo de ng-click, uma variável de contador é incrementada cada vez que o usuário clica em um botão.

Diretiva ng-click em 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 Explicação:

  1. A diretiva ng-init define a variável local. count para 0.
  2. A diretiva ng-click no botão incrementa count por 1 a cada clique.
  3. A interpolação {{count}} Exibe o valor atual para o usuário.

Saída:

ng-clique em AngularJS

O botão "Incrementar" é exibido e a contagem é inicialmente zero. Clicar nele incrementa o valor, como mostra a imagem abaixo.

ng-clique em AngularJS

O que é a diretiva ng-show no AngularJS?

O diretiva ng-show mostra ou oculta um determinado HTML elemento baseado na expressão fornecida ao atributo ng-show. Internamente, o elemento é exibido ou ocultado removendo ou adicionando o .ng-hide Classe CSS, uma classe predefinida que define display para none.

Sintaxe de ng-show em AngularJS

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

Exemplo de ng-show em AngularJS

Este exemplo usa ng-show para revelar um elemento oculto.

Diretiva ng-show em 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 Explicação:

  1. A diretiva ng-click no botão faz referência a um ShowHide função definida no controlador DemoController.
  2. O atributo ng-show está associado à div que contém o texto Angular. É esse elemento que tem sua visibilidade controlada.
  3. No controlador, o IsVisible A variável membro é colocada no objeto de escopo e inicializada com o valor false, portanto, a div fica oculta quando a página é carregada pela primeira vez. Com ng-show, um valor de verdadeiro exibe o elemento e falso esconde isso.
  4. O ShowHide conjuntos de funções IsVisible para que a div fique visível.

Saída:

Diretiva ng-show em AngularJS

A div que contém o texto não é exibida inicialmente, porque IsVisible Começa como falso. Clicando Mostrar Angular Define como verdadeiro e o texto fica visível.

Diretiva ng-show em AngularJS

ARTIGOS RELACIONADOS

O que é a diretiva ng-hide no AngularJS?

O diretiva ng-hide Oculta um elemento quando sua expressão é avaliada como VERDADEIRA e exibe o elemento quando a expressão é FALSA — o inverso exato de `ng-show`. Internamente, utiliza o mesmo... .ng-hide Classe CSS.

Sintaxe de ng-hide em AngularJS

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

Exemplo de ng-hide em AngularJS

Este exemplo espelha o exemplo do ng-show para que as duas diretivas possam ser comparadas diretamente.

Diretiva ng-hide em 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 Explicação:

  1. A diretiva ng-click no botão faz referência a ShowHide funcionam em DemoController.
  2. O ng-ocultar O atributo é anexado à div que contém o texto Angular.
  3. IsVisible é inicializado para falseComo se trata de ng-hide em vez de ng-show, um valor falso significa que a div está oculta. visível quando a página é carregada pela primeira vez.
  4. O ShowHide conjuntos de funções IsVisible para verdadeiro, o que oculta a div.

Saída:

Diretiva ng-hide em AngularJS

A div é exibida inicialmente porque o valor `false` é passado para `ng-hide`. Clicando Ocultar Angular passa a ser verdade e a palavra desaparece.

Diretiva ng-hide em AngularJS

ng-show vs ng-hide vs ng-if: principais diferenças

Três diretivas controlam se o usuário vê um elemento, e a escolha entre elas afeta tanto o comportamento quanto o desempenho de renderização. As duas primeiras apenas alternam uma classe CSS, portanto o elemento está sempre presente na página; a terceira adiciona e remove o próprio elemento.

Aspecto ng-show ng-ocultar ng-if
Elemento visível quando A expressão é verdadeira. A expressão é falsa. A expressão é verdadeira.
Elemento no DOM Sempre Sempre Somente enquanto for verdade
Método usado Togglclasse .ng-hide Togglclasse .ng-hide Cria e destrói o elemento.
Coleira infantil Compartilha o escopo pai Compartilha o escopo pai Cria um novo escopo filho
Observadores quando escondidos Ainda ativo Ainda ativo Removido
Melhor para Alternância frequente do conteúdo de luz Condições invertidas Conteúdo pesado exibido raramente

Use `ng-show` ou `ng-hide` quando um elemento alterna entre elementos com frequência, pois o elemento nunca é reconstruído e a alternância custa apenas uma mudança de classe. Use `ng-if` para seções dispendiosas exibidas raramente, já que remover o elemento também remove seus observadores e reduz o custo de atualização a cada ciclo.

Diretivas de ouvinte de eventos AngularJS

Você pode adicionar ouvintes de eventos do AngularJS a elementos HTML usando um ou mais destes. directivas:

  • ng-desfoque
  • ng-mudança
  • ng-clique
  • ng-cópia
  • ng-corte
  • ng-dblclick
  • ng-foco
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-colar
  • ng-enviar

Cada diretiva aceita uma expressão, e o evento bruto do navegador está disponível dentro dela como $event Quando o manipulador precisar de detalhes como a tecla pressionada ou as coordenadas do clique.

Perguntas Frequentes

Passe o reservado $event variável, como em ng-click="handle($event)"O controlador então recebe o evento nativo e pode ler o alvo, as coordenadas ou chamar preventDefault.

O ng-repeat cria um escopo filho para cada item, portanto, atribuir um valor primitivo dentro do manipulador atualiza apenas esse filho. Escreva em uma propriedade de objeto no escopo pai ou use $parent, para tornar a mudança visível externamente.

Parcialmente. AI ferramentas convertem ng-click em (click) e ng-show para *ngIf de forma confiável, mas a lógica dependente do escopo e as vinculações bidirecionais precisam de revisão manual, porque o escopo do AngularJS não tem um equivalente direto no Angular.

Os assistentes de IA identificam rapidamente as causas mais comuns: a ausência de um ng-app, um nome de controlador que não corresponde ao registro do módulo ou um erro de digitação no atributo da diretiva. A correção sugerida ainda precisa ser testada no navegador.

Não. O AngularJS fornece apenas ng-show, ng-hide e ng-if. Não existe uma diretiva ng-visible, e referenciá-la não produz efeito algum, pois o AngularJS ignora atributos não reconhecidos.

Resuma esta postagem com: