Directivele AngularJS ng-click, ng-show și ng-hide

prin: James Hartman James Hartman
Hours Actualizat

⚡ Rezumat inteligent

Evenimentele AngularJS permit unei aplicații web să răspundă la input-urile utilizatorului, cum ar fi clicurile mouse-ului, apăsările de taste și acțiunile de trecere cu mouse-ul. Directivele precum ng-click, ng-show și ng-hide leagă acest comportament declarativ în markup, în loc să fie prin intermediul listenerelor DOM manuale.

  • 🖱️ Gestionarea clicurilor: Funcția ng-click atașează o expresie sau o funcție de controler unui element, cel mai frecvent unui buton.
  • 👁️ Afișare condiționată: ng-show randează un element atunci când expresia sa este adevărată, în timp ce ng-hide îl elimină atunci când expresia este adevărată.
  • 🎨 Mecanism: Ambele directive activează clasa CSS ng-hide încorporată, care setează afișarea la none, astfel încât elementul rămâne în DOM.
  • 🔗 Obligarea domeniului de aplicare: O variabilă membru plasată pe $scope determină vizibilitatea, iar modificarea acesteia în cadrul unui handler actualizează imediat vizualizarea.
  • 📋 Interval de directivă: Optsprezece directive de ascultare acoperă evenimentele de blur, change, focus, keyboard, mouse, paste și submit.
  • ⚠️ Starea asistenței: AngularJS a ajuns la sfârșitul perioadei de funcționare pe 31 decembrie 2021, așa că noile proiecte ar trebui să vizeze în schimb Angular modern.
Citește mai mult

AngularJS ng-click ng-show ng-hide directive

Evenimente AngularJS

Evenimente AngularJS sunt funcționalitățile care permit aplicațiilor web să interacționeze cu intrările utilizatorului, cum ar fi clicurile mouse-ului, introducerea de date de la tastatură și trecerea cu mouse-ul peste ele. Evenimentele trebuie gestionate în aplicațiile web pentru a efectua sarcini și acțiuni specifice, iar fiecare dintre ele este declanșată atunci când utilizatorul efectuează acțiunea corespunzătoare.

Când creați aplicații web, mai devreme sau mai târziu, aplicația dvs. trebuie să gestioneze evenimente DOM, cum ar fi clicurile și mișcările mouse-ului, apăsările de taste și evenimentele de modificare. AngularJS furnizează directive care gestionează aceste evenimente în mod declarativ.

De exemplu, dacă un buton de pe pagină ar trebui să proceseze ceva atunci când este dat clic, directiva de eveniment ng-click oferă acel hook.

⚠️ Notificare de asistență: AngularJS a atins sfârșitul duratei de viață la 31 decembrie 2021 și nu primește alte patch-uri sau corecții de securitate de la echipa Angular. Directivele de mai jos rămân corecte pentru menținerea aplicațiilor AngularJS 1.x existente; pentru lucrări noi, utilizați versiuni moderne Unghiular, unde aceste directive sunt înlocuite de legături de evenimente, cum ar fi (click) și de *ngIf.

Ce este directiva ng-click în AngularJS?

„directiva ng-click” În AngularJS se aplică un comportament personalizat atunci când se face clic pe un element HTML. Se folosește în mod normal pe butoane, deoarece acestea sunt cel mai comun loc pentru atașarea răspunsurilor la clicuri și este folosit și pentru a declanșa alerte la clic.

Sintaxa ng-click în AngularJS

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

Exemplu de ng-click în AngularJS

În acest exemplu ng-click, o variabilă contor se incrementează de fiecare dată când utilizatorul face clic pe un buton.

ng-click directivă în 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ţie:

  1. Directiva ng-init setează variabila locală count la 0.
  2. Directiva ng-click de pe buton incrementează count cu 1 la fiecare clic.
  3. Interpolarea {{count}} afișează utilizatorului valoarea curentă.

ieșire:

ng-clic în AngularJS

Butonul Incrementare este afișat, iar numărătoarea este inițial zero. Dacă faceți clic pe acesta, valoarea se incrementează, așa cum se arată în imaginea de mai jos.

ng-clic în AngularJS

Ce este Directiva ng-show în AngularJS?

directiva ng-show arată sau ascunde un anumit HTML element bazat pe expresia furnizată atributului ng-show. Intern, elementul este afișat sau ascuns prin eliminarea sau adăugarea .ng-hide Clasa CSS, o clasă predefinită care definește display la none.

Sintaxa lui ng-show în AngularJS

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

Exemplu de ng-show în AngularJS

Acest exemplu folosește ng-show pentru a dezvălui un element ascuns.

Directiva ng-show în 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ţie:

  1. Directiva ng-click de pe buton face referire la un ShowHide funcție definită în controler DemoController.
  2. Atributul ng-show este atașat elementului div care conține textul Angular. Acesta este elementul a cărui vizibilitate este controlată.
  3. În controler, IsVisible variabila membru este plasată pe obiectul de domeniu și inițializată la false, deci div este ascuns când pagina se încarcă pentru prima dată. Cu ng-show, o valoare de adevărat afișează elementul și fals o ascunde.
  4. ShowHide seturi de funcții IsVisible la true, astfel încât div-ul să devină vizibil.

ieșire:

Directiva ng-show în AngularJS

Div-ul care conține textul nu este afișat inițial, deoarece IsVisible începe ca fals. Clic Afișează Angular îl setează la true și textul devine vizibil.

Directiva ng-show în AngularJS

ARTICOLE SIMILARE

Ce este directiva ng-hide în AngularJS?

directiva ng-hide ascunde un element atunci când expresia sa se evaluează ca TRUE și afișează elementul atunci când expresia este FALSE — exact inversul lui ng-show. Intern, folosește aceeași .ng-hide Clasa CSS.

Sintaxa lui ng-hide în AngularJS

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

Exemplu de ng-hide în AngularJS

Acest exemplu oglindește exemplul ng-show, astfel încât cele două directive pot fi comparate direct.

Directiva ng-hide în 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ţie:

  1. Directiva ng-click de pe buton face referire la ShowHide funcția în DemoController.
  2. ng-hide este atașat la div-ul care conține textul Angular.
  3. IsVisible este inițializat la falseDeoarece este vorba de ng-hide și nu ng-show, o valoare falsă înseamnă că div-ul este vizibil când pagina se încarcă pentru prima dată.
  4. ShowHide seturi de funcții IsVisible la true, ceea ce ascunde div-ul.

ieșire:

Directiva ng-hide în AngularJS

Div-ul este afișat inițial deoarece valoarea false este transmisă către ng-hide. Dacă faceți clic pe Ascunde Angular se dovedește adevărat și cuvântul dispare.

Directiva ng-hide în AngularJS

ng-show vs ng-hide vs ng-if: diferențe cheie

Trei directive controlează dacă utilizatorul vede un element, iar alegerea dintre ele afectează atât comportamentul, cât și performanța de randare. Primele două activează doar o clasă CSS, astfel încât elementul este întotdeauna prezent în pagină; a treia adaugă și elimină elementul în sine.

Aspect ng-show ng-hide ng-if
Element vizibil când Expresia este adevărată Expresia este falsă Expresia este adevărată
Element în DOM Mereu Mereu Numai cât timp este adevărat
Metoda folosita Togglclasa es .ng-hide Togglclasa es .ng-hide Creează și distruge elementul
Domeniu de aplicare copil Partajează domeniul de aplicare părinte Partajează domeniul de aplicare părinte Creează un nou domeniu de aplicare copil
Observatori când sunt ascunși Încă activ Încă activ îndepărtat
Cel mai bun pentru Comutare frecventă a conținutului luminos Condiții inversate Conținut intens afișat rar

Folosește ng-show sau ng-hide când un element se comută des, deoarece elementul nu este niciodată reconstruit, iar comutarea costă doar o schimbare de clasă. Folosește ng-if pentru secțiuni costisitoare afișate rar, deoarece eliminarea elementului elimină și observatorii acestuia și reduce costul digestului la fiecare ciclu.

Directive AngularJS pentru ascultarea evenimentelor

Puteți adăuga listenere de evenimente AngularJS la elemente HTML folosind unul sau mai multe dintre acestea instrucțiuni:

  • ng-blur
  • ng-schimbare
  • ng-clic
  • ng-copie
  • ng-cut
  • ng-dblclick
  • ng-focalizare
  • ng-keydown
  • ng-apăsare taste
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste
  • ng-submit

Fiecare directivă acceptă o expresie, iar evenimentul brut al browserului este disponibil în interiorul acesteia ca $event când utilizatorul are nevoie de detalii precum tasta apăsată sau coordonatele clicului.

Întrebări frecvente

Treceți rezervatul $event variabilă, ca în ng-click="handle($event)"Controlerul primește apoi evenimentul nativ și poate citi ținta, coordonatele sau poate apela metoda preventDefault.

ng-repeat creează un domeniu de aplicare copil per element, astfel încât atribuirea unei primitive în interiorul handlerului actualizează doar acel copil. Scrieți într-o proprietate a obiectului din domeniul de aplicare părinte sau utilizați $parent, pentru a face schimbarea vizibilă în exterior.

Parţial. AI instrumente convertesc ng-click în (click) și ng-show către *ngIf fiabil, dar logica dependentă de domeniu și legăturile bidirecționale necesită revizuire manuală, deoarece domeniul de aplicare AngularJS nu are un echivalent Angular direct.

Asistenții inteligenți artificiali identifică rapid cauzele obișnuite: o aplicație ng lipsă, un nume de controler care nu corespunde înregistrării modulului sau o greșeală de scriere în atributul directive. Remedierea sugerată trebuie încă testată în browser.

Nu. AngularJS oferă doar ng-show, ng-hide și ng-if. Nu există o directivă ng-visible, iar referențierea uneia nu produce niciun efect deoarece AngularJS ignoră atributele nerecunoscute.

Rezumați această postare cu: