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

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

Gli eventi di AngularJS consentono a un'applicazione web di rispondere agli input dell'utente, come clic del mouse, pressione dei tasti e azioni al passaggio del mouse. Direttive come ng-click, ng-show e ng-hide definiscono tale comportamento in modo dichiarativo nel markup, anziché tramite listener DOM manuali.

  • 🖱️ Gestione dei clic: ng-click associa un'espressione o una funzione di controllo a un elemento, più comunemente un pulsante.
  • 👁️ Visualizzazione condizionale: ng-show visualizza un elemento quando la sua espressione è vera, mentre ng-hide lo rimuove quando l'espressione è vera.
  • 🎨 Meccanismo: Entrambe le direttive attivano/disattivano la classe CSS integrata ng-hide, che imposta la proprietà display su none, in modo che l'elemento rimanga nel DOM.
  • 🔗 Ambito di applicazione: Una variabile membro posizionata su $scope controlla la visibilità e la sua modifica all'interno di un gestore aggiorna immediatamente la vista.
  • 📋 Ambito di applicazione della direttiva: Diciotto direttive di ascolto riguardano gli eventi di sfocatura, modifica, messa a fuoco, tastiera, mouse, incolla e invio.
  • ⚠️ Stato del supporto: Il supporto per AngularJS è terminato il 31 dicembre 2021, pertanto i nuovi progetti dovrebbero puntare alle versioni più recenti di Angular.
Scopri di più

Direttive AngularJS ng-click ng-show ng-hide

Eventi AngularJS

Eventi AngularJS Gli eventi sono le funzionalità che consentono alle applicazioni web di interagire con gli input dell'utente, come i clic del mouse, l'input da tastiera e il passaggio del mouse. Nelle applicazioni web è necessario gestire gli eventi per eseguire attività e azioni specifiche, e ciascuno di essi viene attivato quando l'utente esegue l'azione corrispondente.

Quando si creano applicazioni web, prima o poi è necessario gestire eventi del DOM come clic e movimenti del mouse, pressione dei tasti della tastiera ed eventi di modifica. AngularJS fornisce direttive che gestiscono questi eventi in modo dichiarativo.

Ad esempio, se un pulsante sulla pagina deve elaborare qualcosa quando viene cliccato, la direttiva evento ng-click fornisce questo aggancio.

⚠️ Avviso di assistenza: AngularJS ha raggiunto Fine della vita il 31 dicembre 2021 e non riceve ulteriori patch o correzioni di sicurezza dal team di Angular. Le direttive seguenti rimangono valide per la manutenzione delle applicazioni AngularJS 1.x esistenti; per i nuovi progetti, utilizzare le versioni moderne. Angular, dove queste direttive vengono sostituite da associazioni di eventi come (click) e *ngIf.

Cos'è la direttiva ng-click in AngularJS?

Migliori “direttiva ng-click” In AngularJS, viene applicato un comportamento personalizzato quando si fa clic su un elemento HTML. Viene normalmente utilizzato sui pulsanti, poiché sono il punto più comune in cui associare risposte al clic, e viene anche utilizzato per visualizzare avvisi al clic.

Sintassi di ng-click in AngularJS

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

Esempio di ng-click in AngularJS

In questo esempio di ng-click, una variabile contatore viene incrementata ogni volta che l'utente fa clic su un pulsante.

Direttiva ng-click in 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 Spiegazione:

  1. La direttiva ng-init imposta la variabile locale count a 0.
  2. La direttiva ng-click sul pulsante incrementa count di 1 ad ogni clic.
  3. L'interpolazione {{count}} mostra il valore corrente all'utente.

Produzione:

ng-clic in AngularJS

Il pulsante "Incrementa" viene visualizzato e il conteggio inizialmente è zero. Cliccandoci sopra, il valore viene incrementato, come mostrato nell'immagine sottostante.

ng-clic in AngularJS

Cos'è la direttiva ng-show in AngularJS?

Migliori Direttiva ng-show mostra o nasconde un dato HTML elemento basato sull'espressione fornita all'attributo ng-show. Internamente l'elemento viene mostrato o nascosto rimuovendo o aggiungendo l'espressione. .ng-hide Classe CSS, una classe predefinita che imposta display a none.

Sintassi di ng-show in AngularJS

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

Esempio di ng-show in AngularJS

Questo esempio utilizza ng-show per mostrare un elemento nascosto.

Direttiva ng-show in 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 Spiegazione:

  1. La direttiva ng-click sul pulsante fa riferimento a ShowHide funzione definita nel controller DemoController.
  2. L'attributo ng-show è associato al div contenente il testo Angular. Questo è l'elemento di cui viene controllata la visibilità.
  3. Nel controller, il IsVisible La variabile membro viene posizionata sull'oggetto scope e inizializzata a false, quindi il div è nascosto al primo caricamento della pagina. Con ng-show, un valore di vero visualizza l'elemento e falso lo nasconde.
  4. Migliori ShowHide insiemi di funzioni IsVisible impostandolo su true in modo che il div diventi visibile.

Produzione:

Direttiva ng-show in AngularJS

Il div che contiene il testo non viene mostrato inizialmente, perché IsVisible inizia come falso. Cliccando Mostra Angular Impostandolo su true, il testo diventa visibile.

Direttiva ng-show in AngularJS

Da non perdere:

Cos'è la direttiva ng-hide in AngularJS?

Migliori direttiva ng-hide nasconde un elemento quando la sua espressione restituisce TRUE e mostra l'elemento quando l'espressione è FALSE, l'esatto inverso di ng-show. Internamente utilizza lo stesso .ng-hide Classe CSS.

Sintassi di ng-hide in AngularJS

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

Esempio di ng-hide in AngularJS

Questo esempio rispecchia l'esempio di ng-show, in modo che le due direttive possano essere confrontate direttamente.

Direttiva ng-hide in 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 Spiegazione:

  1. La direttiva ng-click sul pulsante fa riferimento a ShowHide funzione in DemoController.
  2. Migliori ng-hide L'attributo è associato al div contenente il testo Angular.
  3. IsVisible viene inizializzato a falsePoiché si tratta di ng-hide anziché di ng-show, un valore false significa che il div è visibile al primo caricamento della pagina.
  4. Migliori ShowHide insiemi di funzioni IsVisible a vero, che nasconde il div.

Produzione:

Direttiva ng-hide in AngularJS

Il div viene mostrato inizialmente perché a ng-hide viene passato false. Cliccando Nascondi Angular passa vero e la parola scompare.

Direttiva ng-hide in AngularJS

ng-show vs ng-hide vs ng-if: differenze chiave

Tre direttive controllano se l'utente vede un elemento e la scelta tra di esse influisce sia sul comportamento che sulle prestazioni di rendering. Le prime due si limitano ad attivare/disattivare una classe CSS, quindi l'elemento è sempre presente nella pagina; la terza aggiunge e rimuove l'elemento stesso.

Aspetto ng-mostra ng-hide ng-se
Elemento visibile quando L'espressione è vera L'espressione è falsa L'espressione è vera
Elemento nel DOM Sempre Sempre Solo finché è vero
Metodo utilizzato Toggles .ng-hide class Toggles .ng-hide class Crea e distrugge l'elemento
ambito infantile Condivide l'ambito padre Condivide l'ambito padre Crea un nuovo ambito figlio
Osservatori quando sono nascosti Ancora attivo Ancora attivo rimosso
migliori per Commutazione frequente del contenuto luminoso Condizioni invertite I contenuti pesanti vengono mostrati raramente

Utilizza `ng-show` o `ng-hide` quando un elemento viene visualizzato/nascosto frequentemente, poiché l'elemento non viene mai ricostruito e la visualizzazione/nascondimento comporta solo un cambio di classe. Utilizza `ng-if` per le sezioni che richiedono molte risorse e vengono visualizzate raramente, poiché la rimozione dell'elemento rimuove anche i suoi osservatori e riduce il costo di digest a ogni ciclo.

Direttive del listener di eventi AngularJS

È possibile aggiungere listener di eventi AngularJS agli elementi HTML utilizzando uno o più di questi direttive:

  • ng-sfocatura
  • ng-cambiamento
  • ng-clic
  • ng-copia
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-pressione dei tasti
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste
  • ng-invia

Ogni direttiva accetta un'espressione e l'evento del browser grezzo è disponibile al suo interno come $event quando il gestore ha bisogno di dettagli come il tasto premuto o le coordinate del clic.

DOMANDE FREQUENTI

Passare il riservato $event variabile, come in ng-click="handle($event)"Il controller riceve quindi l'evento nativo e può leggere il target, le coordinate o chiamare preventDefault.

ng-repeat crea uno scope figlio per ogni elemento, quindi l'assegnazione di un primitivo all'interno del gestore aggiorna solo quel figlio. Scrivi in ​​una proprietà oggetto sullo scope padre oppure usa $parentper rendere visibile il cambiamento all'esterno.

In parte. AI strumenti convertono ng-click in (click) e ng-show a *ngIf in modo affidabile, ma la logica dipendente dall'ambito e i binding bidirezionali richiedono una revisione manuale, perché l'ambito di AngularJS non ha un equivalente diretto in Angular.

Gli assistenti basati sull'IA individuano rapidamente le cause più comuni: un ng-app mancante, un nome del controller che non corrisponde alla registrazione del modulo o un errore di battitura nell'attributo della direttiva. La soluzione suggerita deve ancora essere testata nel browser.

No. AngularJS fornisce solo ng-show, ng-hide e ng-if. Non esiste una direttiva ng-visible e il suo riferimento non produce alcun effetto perché AngularJS ignora gli attributi non riconosciuti.

Riassumi questo post con: