AngularJS ng-klikk, ng-vis og ng-skjul direktiver

by: James Hartman James Hartman
Hours oppdatert

⚡ Smart oppsummering

AngularJS-hendelser lar en webapplikasjon reagere på brukerinput som museklikk, tastetrykk og musepekerhandlinger. Direktiver som ng-click, ng-show og ng-hide binder denne oppførselen deklarativt i markup i stedet for gjennom manuelle DOM-lyttere.

  • 🖱️ Klikkhåndtering: ng-click knytter et uttrykk eller en kontrollerfunksjon til et element, vanligvis en knapp.
  • 👁️ Betinget visning: ng-show gjengir et element når uttrykket er sant, mens ng-hide fjerner det når uttrykket er sant.
  • 🎨 Mekanisme: Begge direktivene slår av og på den innebygde ng-hide CSS-klassen, som setter display til none, slik at elementet forblir i DOM-en.
  • 🔗 Omfangsbinding: En medlemsvariabel plassert på $scope øker synligheten, og endring av den i en handler oppdaterer visningen umiddelbart.
  • ???? Direktivområde: Atten lytterinstruksjoner dekker uskarphet, endring, fokus, tastatur, mus, liming og sending av hendelser.
  • ⚠️ Støttestatus: AngularJS nådde slutten av sin levetid 31. desember 2021, så nye prosjekter bør i stedet målrettes mot moderne Angular.
Les mer

AngularJS ng-klikk ng-vis ng-skjul direktiver

AngularJS-arrangementer

AngularJS-arrangementer er funksjonalitetene som lar webapplikasjoner samhandle med brukerinndata som museklikk, tastaturinndata og musepekerbevegelse. Hendelser må håndteres i webapplikasjoner for å kunne utføre spesifikke oppgaver og handlinger, og hver enkelt utløses når brukeren utfører den samsvarende handlingen.

Når du lager webapplikasjoner, må applikasjonen din før eller siden håndtere DOM-hendelser som museklikk og -bevegelser, tastaturtrykk og endringshendelser. AngularJS gir direktiver som håndterer disse hendelsene deklarativt.

Hvis for eksempel en knapp på siden skal behandle noe når den klikkes, sørger ng-click-hendelsesdirektivet for den kroken.

⚠️ Støttemelding: AngularJS nådde levetidens slutt 31. desember 2021 og mottar ingen ytterligere oppdateringer eller sikkerhetsrettelser fra Angular-teamet. Direktivene nedenfor er fortsatt gyldige for vedlikehold av eksisterende AngularJS 1.x-applikasjoner; for nytt arbeid, bruk moderne Vinkel, hvor disse direktivene erstattes av hendelsesbindinger som (click) og ved *ngIf.

Hva er ng-click-direktivet i AngularJS?

Ocuco "ng-klikk direktiv" I AngularJS brukes tilpasset oppførsel når et HTML-element klikkes. Det brukes vanligvis på knapper, siden det er de vanligste stedene å legge til klikkresponser, og det brukes også til å utløse varsler ved klikk.

Syntaks for ng-klikk i AngularJS

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

Eksempel på ng-klikk i AngularJS

I dette ng-klikk-eksemplet øker en tellervariabel hver gang brukeren klikker på en knapp.

ng-klikk 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 Forklaring:

  1. ng-init-direktivet setter den lokale variabelen count til 0.
  2. ng-click-direktivet på knappen øker count med 1 for hvert klikk.
  3. Interpolasjonen {{count}} viser gjeldende verdi til brukeren.

Utgang:

ng-klikk i AngularJS

Økningsknappen vises, og telleren er i utgangspunktet null. Hvis du klikker på den, økes verdien, som bildet nedenfor viser.

ng-klikk i AngularJS

Hva er ng-show-direktivet i AngularJS?

Ocuco ng-show-direktivet viser eller skjuler en gitt HTML elementet basert på uttrykket som er gitt til ng-show-attributtet. Internt vises eller skjules elementet ved å fjerne eller legge til .ng-hide CSS-klasse, en forhåndsdefinert klasse som angir display til none.

Syntaks for ng-show i AngularJS

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

Eksempel på ng-show i AngularJS

Dette eksemplet bruker ng-show for å avsløre et skjult 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 Forklaring:

  1. ng-click-direktivet på knappen refererer til en ShowHide funksjon definert i kontrolleren DemoController.
  2. Attributtet ng-show er knyttet til div-en som inneholder teksten Angular. Dette er elementet hvis synlighet kontrolleres.
  3. I kontrolleren, den IsVisible medlemsvariabelen plasseres på omfangsobjektet og initialiseres til false, slik at div-en er skjult når siden lastes inn for første gang. Med ng-show, en verdi på sant viser elementet og falsk skjuler det.
  4. Ocuco ShowHide funksjonssett IsVisible til true slik at div-en blir synlig.

Utgang:

ng-show-direktiv i AngularJS

Diven som inneholder teksten vises ikke i utgangspunktet, fordi IsVisible starter som usann. Klikker Vis Angular setter den til sann, og teksten blir synlig.

ng-show-direktiv i AngularJS

RELATERTE ARTIKLER

Hva er ng-hide-direktivet i AngularJS?

Ocuco ng-hide direktiv skjuler et element når uttrykket evalueres til SANN, og viser elementet når uttrykket er USANN – det nøyaktige motsatte av ng-show. Internt bruker den det samme .ng-hide CSS-klasse.

Syntaks for ng-hide i AngularJS

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

Eksempel på ng-hide i AngularJS

Dette eksemplet speiler ng-show-eksemplet, slik at de to direktivene kan sammenlignes direkte.

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

  1. ng-click-direktivet på knappen refererer til ShowHide fungere i DemoController.
  2. Ocuco ng-skjul Attributtet er knyttet til div-en som inneholder teksten Angular.
  3. IsVisible er initialisert til falseFordi dette er ng-hide i stedet for ng-show, betyr en falsk verdi at div-en er synlig når siden lastes inn for første gang.
  4. Ocuco ShowHide funksjonssett IsVisible til true, som skjuler div-en.

Utgang:

ng-hide-direktivet i AngularJS

Div-en vises i utgangspunktet fordi false sendes til ng-hide. Klikking Skjul Angular går over i sant og ordet forsvinner.

ng-hide-direktivet i AngularJS

ng-show vs ng-hide vs ng-if: Nøkkelforskjeller

Tre direktiver styrer om brukeren ser et element, og valget mellom dem påvirker både oppførsel og gjengivelsesytelse. De to første veksler bare en CSS-klasse, slik at elementet alltid er tilstede på siden; den tredje legger til og fjerner selve elementet.

Aspekt ng-show ng-skjul ng-hvis
Element synlig når Uttrykket er sant Uttrykket er usant Uttrykket er sant
Element i DOM-en Alltid Alltid Bare mens det er sant
Metode brukt Toggles .ng-skjul klasse Toggles .ng-skjul klasse Skaper og ødelegger elementet
Underordnet omfang Deler det overordnede omfanget Deler det overordnede omfanget Oppretter et nytt underordnet omfang
Overvåkere når de er skjult Fortsatt aktiv Fortsatt aktiv fjernet
Best for Hyppig veksling av lysinnhold Inverterte forhold Tungt innhold vises sjelden

Bruk ng-show eller ng-hide når et element ofte veksler, fordi elementet aldri gjenoppbygges og vekslefunksjonen bare koster et klassebytte. Bruk ng-if for dyre seksjoner som vises sjelden, siden fjerning av elementet også fjerner dets overvåkere og reduserer kostnadene for sammendrag på hver syklus.

AngularJS-hendelseslytterdirektiver

Du kan legge til AngularJS-hendelseslyttere til HTML-elementer ved å bruke ett eller flere av disse direktiver:

  • ng-uskarphet
  • ng-endring
  • ng-klikk
  • ng-kopi
  • ng-kutt
  • ng-dblclick
  • ng-fokus
  • ng-taste ned
  • ng-tastetrykk
  • ng-tasten
  • ng-musened
  • ng-mouseenter
  • ng-museblad
  • ng-mus
  • ng-museover
  • ng-mouseup
  • ng-lim
  • ng-send inn

Hvert direktiv aksepterer et uttrykk, og den rå nettleserhendelsen er tilgjengelig i det som $event når behandleren trenger detaljer som den trykkede tasten eller klikkkoordinatene.

Spørsmål og svar

Pass den reserverte $event variabel, som i ng-click="handle($event)"Kontrolleren mottar deretter den opprinnelige hendelsen og kan lese mål, koordinater eller kalle preventDefault.

ng-repeat oppretter et underordnet omfang per element, så tildeling av en primitiv i behandleren oppdaterer bare det underordnede. Skriv til en objektegenskap på det overordnede omfanget, eller bruk $parent, for å gjøre endringen synlig utad.

Delvis. AI verktøy konverterer ng-klikk til (click) og ng-show til *ngIf pålitelig, men omfangsavhengig logikk og toveisbindinger trenger manuell gjennomgang, fordi AngularJS-omfanget ikke har noen direkte Angular-ekvivalent.

AI-assistenter oppdager de vanlige årsakene raskt: en manglende ng-app, et kontrollernavn som ikke samsvarer med modulregistreringen, eller en skrivefeil i direktivattributtet. Den foreslåtte løsningen må fortsatt testes i nettleseren.

Nei. AngularJS tilbyr ng-show, ng-hide og ng-if only. Det finnes ingen ng-visible-direktiv, og det å referere til en gir ingen effekt fordi AngularJS ignorerer ukjente attributter.

Oppsummer dette innlegget med: