AngularJS ng-klicka, ng-visa & ng-dölj direktiv

By: James Hartman James Hartman
Hours Uppdaterad

⚡ Smart sammanfattning

AngularJS-händelser låter en webbapplikation svara på användarinmatning som musklick, tangenttryckningar och muspekaråtgärder. Direktiv som ng-click, ng-show och ng-hide binder detta beteende deklarativt i markup istället för genom manuella DOM-lyssnare.

  • 🖱️ Klickhantering: ng-click kopplar ett uttryck eller en kontrollfunktion till ett element, oftast en knapp.
  • 👁️ Villkorlig visning: ng-show renderar ett element när dess uttryck är sant, medan ng-hide tar bort det när uttrycket är sant.
  • 🎨 Mekanism: Båda direktiven aktiverar den inbyggda CSS-klassen ng-hide, som ställer in display till none, så elementet stannar kvar i DOM:en.
  • 🔗 Omfattningsbindning: En medlemsvariabel placerad på $scope ökar synligheten, och om du ändrar den i en hanterare uppdateras vyn omedelbart.
  • 📋 Direktivområde: Arton lyssnardirektiv täcker händelser som oskärpa, ändring, fokus, tangentbord, mus, klistra in och skicka.
  • ⚠️ Supportstatus: AngularJS nådde slutet av sin livscykel den 31 december 2021, så nya projekt bör istället rikta in sig på moderna Angular.
Läs mer

AngularJS ng-klicka ng-visa ng-dölj direktiv

AngularJS-evenemang

AngularJS-evenemang är de funktioner som gör det möjligt för webbapplikationer att interagera med användarinmatningar som musklick, tangentbordsinmatning och muspekarrörelse. Händelser måste hanteras i webbapplikationer för att kunna utföra specifika uppgifter och åtgärder, och var och en utlöses när användaren utför matchande åtgärd.

När du skapar webbapplikationer måste din applikation förr eller senare hantera DOM-händelser som musklick och -rörelser, tangentbordstryckningar och ändringshändelser. AngularJS tillhandahåller direktiv som hanterar dessa händelser deklarativt.

Om till exempel en knapp på sidan ska bearbeta något när den klickas, tillhandahåller händelsedirektivet ng-click den hooken.

⚠️ Supportmeddelande: AngularJS nådde slut på livscykeln den 31 december 2021 och får inga ytterligare patchar eller säkerhetsfixar från Angular-teamet. Direktiven nedan förblir giltiga för underhåll av befintliga AngularJS 1.x-applikationer; för nytt arbete, använd moderna Vinkel, där dessa direktiv ersätts av händelsebindningar som (click) och genom att *ngIf.

Vad är ng-click-direktiv i AngularJS?

Ocuco-landskapet "ng-klick direktiv" I AngularJS tillämpas ett anpassat beteende när ett HTML-element klickas. Det används normalt på knappar, eftersom det är de vanligaste platserna att bifoga klicksvar, och det används också för att utlösa varningar vid klick.

Syntax för ng-klick i AngularJS

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

Exempel på ng-klick i AngularJS

I det här ng-click-exemplet ökar en räknarvariabel varje gång användaren klickar på en knapp.

ng-klicka på Direktiv i 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 Förklaring:

  1. Direktivet ng-init anger den lokala variabeln count till 0.
  2. Direktivet ng-click på knappen ökar count med 1 för varje klick.
  3. Interpoleringen {{count}} visar det aktuella värdet för användaren.

Produktion:

ng-klicka i AngularJS

Knappen Ökning visas och räkningen är initialt noll. Om du klickar på den ökas värdet, som bilden nedan visar.

ng-klicka i AngularJS

Vad är ng-show direktiv i AngularJS?

Ocuco-landskapet ng-show-direktivet visar eller döljer en given html element baserat på uttrycket som anges till ng-show-attributet. Internt visas eller döljs elementet genom att ta bort eller lägga till .ng-hide CSS-klass, en fördefinierad klass som anger display till none.

Syntax för ng-show i AngularJS

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

Exempel på ng-show i AngularJS

Det här exemplet använder ng-show för att avslöja ett dolt element.

ng-show Direktiv i 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 Förklaring:

  1. Direktivet ng-click på knappen refererar till en ShowHide funktion definierad i styrenheten DemoController.
  2. Attributet ng-show är kopplat till div-koden som innehåller texten Angular. Det här är elementet vars synlighet styrs.
  3. I styrenheten, den IsVisible medlemsvariabeln placeras på scope-objektet och initieras till false, så div-koden är dold när sidan laddas första gången. Med ng-show, ett värde på sann visar elementet och falsk döljer det.
  4. Ocuco-landskapet ShowHide funktionsmängder IsVisible till true så att div-filen blir synlig.

Produktion:

ng-show Direktiv i AngularJS

Diven som innehåller texten visas inte initialt, eftersom IsVisible börjar som falskt. Klickar Visa Angular sätter den till sant och texten blir synlig.

ng-show Direktiv i AngularJS

RELATERADE ARTIKLAR

Vad är ng-hide-direktivet i AngularJS?

Ocuco-landskapet ng-hide direktiv döljer ett element när dess uttryck utvärderas till SANT, och visar elementet när uttrycket är FALSKT — den exakta inversen av ng-show. Internt använder den samma .ng-hide CSS-klass.

Syntax för ng-hide i AngularJS

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

Exempel på ng-hide i AngularJS

Det här exemplet speglar ng-show-exemplet så de två direktiven kan jämföras direkt.

ng-hide-direktivet i 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 Förklaring:

  1. Direktivet ng-click på knappen refererar till ShowHide funktion i DemoController.
  2. Ocuco-landskapet ng-gömma sig attributet är kopplat till div-delen som innehåller texten Angular.
  3. IsVisible är initialiserad till falseEftersom detta är ng-hide snarare än ng-show, betyder ett falskt värde att div:en är synlig när sidan laddas först.
  4. Ocuco-landskapet ShowHide funktionsmängder IsVisible till true, vilket döljer div-filen.

Produktion:

ng-hide-direktivet i AngularJS

Diven visas initialt eftersom false skickas till ng-hide. Dölj Angular går över till sant och ordet försvinner.

ng-hide-direktivet i AngularJS

ng-show vs ng-hide vs ng-if: Nyckelskillnader

Tre direktiv styr om användaren ser ett element, och valet mellan dem påverkar både beteende och renderingsprestanda. De två första växlar bara mellan en CSS-klass, så elementet finns alltid på sidan; det tredje lägger till och tar bort själva elementet.

Aspect ng-show ng-gömma sig ng-if
Element synligt när Uttrycket är sant Uttrycket är falskt Uttrycket är sant
Element i DOM-filen Alltid Alltid Bara när det är sant
Metod som används Toggles .ng-hide-klassen Toggles .ng-hide-klassen Skapar och förstör elementet
Underordnat omfång Delar det överordnade omfånget Delar det överordnade omfånget Skapar ett nytt underordnat omfång
Tittare när de är gömda Fortfarande aktiv Fortfarande aktiv avlägsnas
Bäst för Frekvent växling av ljusinnehåll Inverterade förhållanden Tungt innehåll visas sällan

Använd ng-show eller ng-hide när ett element växlar ofta, eftersom elementet aldrig byggs om och växlingen bara kostar ett klassbyte. Använd ng-if för dyra sektioner som visas sällan, eftersom borttagning av elementet också tar bort dess bevakare och minskar digestkostnaden för varje cykel.

AngularJS Händelselyssnardirektiv

Du kan lägga till AngularJS-händelselyssnare till HTML-element med hjälp av en eller flera av dessa direktiv:

  • ng-oskärpa
  • ng-förändring
  • ng-klicka
  • ng-kopia
  • ng-snitt
  • ng-dblklick
  • ng-fokus
  • ng-tangenten
  • ng-tangenttryckning
  • ng-tangenten
  • ng-mousedown
  • ng-mouseenter
  • ng-musblad
  • ng-mousemove
  • ng-mus över
  • ng-mouseup
  • ng-klistra
  • ng-submit

Varje direktiv accepterar ett uttryck, och den råa webbläsarhändelsen är tillgänglig inuti den som $event när hanteraren behöver detaljer som den nedtryckta tangenten eller klickkoordinaterna.

Vanliga frågor

Passera den reserverade $event variabel, som i ng-click="handle($event)"Styrenheten tar sedan emot den ursprungliga händelsen och kan läsa target, koordinater eller anropa preventDefault.

ng-repeat skapar ett underordnat scope per objekt, så att tilldela en primitiv inuti hanteraren uppdaterar endast det underordnade. Skriv till en objektegenskap på det överordnade scopet, eller använd $parent, för att göra förändringen synlig utåt.

Delvis. AI verktyg konvertera ng-klicka till (click) och ng-show till *ngIf tillförlitligt, men omfattningsberoende logik och tvåvägsbindningar behöver manuell granskning, eftersom AngularJS-omfånget inte har någon direkt Angular-ekvivalent.

AI-assistenter upptäcker snabbt de vanliga orsakerna: en saknad ng-app, ett kontrollnamn som inte matchar modulregistreringen eller ett stavfel i direktivattributet. Den föreslagna lösningen behöver fortfarande testas i webbläsaren.

Nej. AngularJS erbjuder ng-show, ng-hide och ng-if only. Det finns inget ng-visible-direktiv, och att referera till ett sådant har ingen effekt eftersom AngularJS ignorerar okända attribut.

Sammanfatta detta inlägg med: