Dyrektywy AngularJS ng-click, ng-show i ng-hide

⚡ Inteligentne podsumowanie

Zdarzenia AngularJS pozwalają aplikacji internetowej reagować na dane wprowadzane przez użytkownika, takie jak kliknięcia myszą, naciśnięcia klawiszy i najechanie kursorem. Dyrektywy takie jak ng-click, ng-show i ng-hide wiążą to zachowanie deklaratywnie w znacznikach, zamiast ręcznie za pomocą nasłuchiwaczy DOM.

🖱️. Obsługa kliknięć: ng-click dołącza wyrażenie lub funkcję kontrolera do elementu, najczęściej przycisku.
👁️ Wyświetlanie warunkowe: ng-show renderuje element, gdy jego wyrażenie jest prawdziwe, natomiast ng-hide usuwa go, gdy wyrażenie jest prawdziwe.
🎨 Mechanizm: Obie dyrektywy przełączają wbudowaną klasę CSS ng-hide, która ustawia display na none, dzięki czemu element pozostaje w DOM.
🔗 Powiązanie zakresu: Zmienna członkowska umieszczona w $scope steruje widocznością, a jej zmiana w ramach procedury obsługi powoduje natychmiastową aktualizację widoku.
📋 Zakres dyrektywy: Osiemnaście dyrektyw słuchacza obejmuje zdarzenia rozmycia, zmiany, fokusu, klawiatury, myszy, wklejania i przesyłania.
⚠️ Status wsparcia: Wsparcie dla AngularJS zakończyło się 31 grudnia 2021 r., dlatego nowe projekty powinny skupić się na nowoczesnym Angularze.

Czytaj więcej

Wydarzenia AngularJS

Wydarzenia AngularJS To funkcjonalności, które umożliwiają aplikacjom internetowym interakcję z danymi wprowadzanymi przez użytkownika, takimi jak kliknięcia myszą, wprowadzanie danych z klawiatury i najechanie kursorem myszy na wybrany element. Zdarzenia muszą być obsługiwane w aplikacjach internetowych w celu wykonywania określonych zadań i czynności, a każde z nich jest wyzwalane, gdy użytkownik wykona odpowiednią czynność.

Podczas tworzenia aplikacji internetowych prędzej czy później aplikacja będzie musiała obsługiwać zdarzenia DOM, takie jak kliknięcia i ruchy myszą, naciśnięcia klawiszy i zdarzenia zmiany. angularjs dostarcza dyrektywy, które deklaratywnie obsługują te zdarzenia.

Na przykład, jeśli przycisk na stronie ma po kliknięciu wykonać jakąś czynność, dyrektywa zdarzenia ng-click zapewnia odpowiedni hak.

⚠️ Uwaga dotycząca wsparcia: Osiągnięto AngularJS koniec życia 31 grudnia 2021 r. i nie otrzymuje żadnych dalszych poprawek ani zabezpieczeń od zespołu Angular. Poniższe wytyczne pozostają aktualne w przypadku utrzymania istniejących aplikacji AngularJS 1.x; w przypadku nowych prac należy korzystać z nowoczesnych Angulargdzie dyrektywy te są zastępowane przez powiązania zdarzeń, takie jak (click) i przez *ngIf.

Co to jest dyrektywa ng-click w AngularJS?

„dyrektywa ng-click” W AngularJS stosuje niestandardowe zachowanie po kliknięciu elementu HTML. Zazwyczaj jest ono używane w przyciskach, ponieważ to właśnie tam najczęściej dołączane są odpowiedzi na kliknięcie, a także do generowania alertów po kliknięciu.

Składnia ng-click w AngularJS

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

Przykład ng-click w AngularJS

W tym przykładzie ng-click zmienna licznika zwiększa się za każdym razem, gdy użytkownik kliknie przycisk.

<!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 Wyjaśnienie:

Dyrektywa ng-init ustawia zmienną lokalną count do 0.
Dyrektywa ng-click na przycisku zwiększa count o 1 przy każdym kliknięciu.
Interpolacja {{count}} wyświetla użytkownikowi aktualną wartość.

Wyjście:

Wyświetla się przycisk „Zwiększ”, a licznik początkowo wynosi zero. Kliknięcie go powoduje zwiększenie wartości, jak pokazano na poniższym obrazku.

Co to jest dyrektywa ng-show w AngularJS?

dyrektywa ng-show pokazuje lub ukrywa daną rzecz HTML Element oparty na wyrażeniu podanym w atrybucie ng-show. Wewnętrznie element jest pokazywany lub ukrywany poprzez usunięcie lub dodanie .ng-hide Klasa CSS, predefiniowana klasa, która ustawia display do none.

Składnia ng-show w AngularJS

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

Przykład ng-show w AngularJS

W tym przykładzie użyto polecenia ng-show w celu ujawnienia ukrytego elementu.

<!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 Wyjaśnienie:

Dyrektywa ng-click na przycisku odwołuje się do ShowHide funkcja zdefiniowana w kontrolerze DemoController.
Atrybut ng-show jest dołączony do div zawierającego tekst Angular. To jest element, którego widoczność jest kontrolowana.
W kontrolerze, IsVisible zmienna członkowska jest umieszczana w obiekcie zakresu i inicjowana do false, więc div jest ukryty po pierwszym załadowaniu strony. W przypadku ng-show wartość prawdziwy wyświetla element i fałszywy ukrywa to.
ShowHide zestawy funkcji IsVisible na true, dzięki czemu element div stanie się widoczny.

Wyjście:

Element div zawierający tekst nie jest początkowo wyświetlany, ponieważ IsVisible zaczyna się jako fałsz. Kliknięcie Pokaż kąt ustawia wartość true i tekst staje się widoczny.

Co to jest dyrektywa ng-hide w AngularJS?

dyrektywa ng-hide Ukrywa element, gdy jego wyrażenie jest wartością TRUE, i pokazuje element, gdy wyrażenie jest wartością FALSE — to dokładna odwrotność ng-show. Wewnętrznie używa tego samego .ng-hide Klasa CSS.

Składnia ng-hide w AngularJS

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

Przykład ng-hide w AngularJS

Przykład ten odzwierciedla przykład ng-show, co umożliwia bezpośrednie porównanie obu dyrektyw.

<!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 Wyjaśnienie:

Dyrektywa ng-click na przycisku odwołuje się do ShowHide funkcja w DemoController.
ng-ukryj Atrybut jest dołączony do div zawierającego tekst Angular.
IsVisible jest inicjowany do falsePonieważ jest to ng-hide, a nie ng-show, wartość fałszywa oznacza, że div jest widoczny gdy strona ładuje się po raz pierwszy.
ShowHide zestawy funkcji IsVisible na true, co powoduje ukrycie div.

Wyjście:

Początkowo div jest wyświetlany, ponieważ do ng-hide przekazana jest wartość false. Kliknięcie Ukryj Angular spełnia warunek „prawda” i słowo znika.

ng-show vs ng-hide vs ng-if: kluczowe różnice

Trzy dyrektywy kontrolują, czy użytkownik widzi dany element, a wybór między nimi wpływa zarówno na zachowanie, jak i wydajność renderowania. Pierwsze dwie jedynie przełączają klasę CSS, dzięki czemu element jest zawsze obecny na stronie; trzecia dodaje i usuwa sam element.

WYGLĄD	ng-pokaż	ng-ukryj	ng-if
Element widoczny, gdy	Wyrażenie jest prawdziwe	Wyrażenie jest fałszywe	Wyrażenie jest prawdziwe
Element w DOM	Zawsze	Zawsze	Tylko prawda
Metoda użyta	Toggles .ng-hide klasa	Toggles .ng-hide klasa	Tworzy i niszczy element
Zakres podrzędny	Udostępnia zakres nadrzędny	Udostępnia zakres nadrzędny	Tworzy nowy zakres podrzędny
Obserwatorzy, gdy są ukryci	Nadal aktywny	Nadal aktywny	Usunięto
Najlepszy dla	Częste przełączanie treści light	Odwrócone warunki	Ciężka treść jest rzadko wyświetlana

Użyj ng-show lub ng-hide, gdy element często się przełącza, ponieważ element nigdy nie jest przebudowywany, a przełączenie kosztuje jedynie zmianę klasy. Użyj ng-if w przypadku kosztownych sekcji, które są rzadko wyświetlane, ponieważ usunięcie elementu usuwa również jego obserwatorów i zmniejsza koszt analizy w każdym cyklu.

Dyrektywy odbiornika zdarzeń AngularJS

Możesz dodać słuchaczy zdarzeń AngularJS do elementów HTML, używając jednego lub więcej z tych Dyrektywy:

rozmycie
zmiana
kliknij
kopia ng
ng-cięcie
ng-dblclick
ng-focus
ng-keydown
naciśnięcie klawisza ng
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-wklej
ng-prześlij

Każda dyrektywa akceptuje wyrażenie, a surowe zdarzenie przeglądarki jest w niej dostępne jako $event gdy osoba obsługująca potrzebuje szczegółów, takich jak naciśnięty klawisz lub współrzędne kliknięcia.

FAQ

Przejść przez zarezerwowane $event zmienna, jak w ng-click="handle($event)"Kontroler odbiera następnie zdarzenie natywne i może odczytać cel, współrzędne lub wywołać metodę preventDefault.

Funkcja ng-repeat tworzy zakres podrzędny dla każdego elementu, więc przypisanie prymitywu wewnątrz procedury obsługi aktualizuje tylko ten element podrzędny. Zapis do właściwości obiektu w zakresie nadrzędnym lub użycie $parent, aby zmiana była widoczna na zewnątrz.

Częściowo. AI narzędzia konwertują ng-click na (click) i ng-show do *ngIf niezawodnie, ale logika zależna od zakresu i powiązania dwukierunkowe wymagają ręcznego przeglądu, ponieważ zakres AngularJS nie ma bezpośredniego odpowiednika w Angular.

Asystenci AI szybko wykrywają typowe przyczyny: brak aplikacji ng-app, nazwę kontrolera niezgodną z rejestracją modułu lub literówkę w atrybucie dyrektywy. Sugerowana poprawka nadal wymaga przetestowania w przeglądarce.

Nie. AngularJS udostępnia tylko ng-show, ng-hide i ng-if. Nie ma dyrektywy ng-visible, a odwołanie się do niej nie przynosi efektu, ponieważ AngularJS ignoruje nierozpoznane atrybuty.

Dyrektywy AngularJS ng-click, ng-show i ng-hide

Wydarzenia AngularJS

Co to jest dyrektywa ng-click w AngularJS?

Składnia ng-click w AngularJS

Przykład ng-click w AngularJS

Co to jest dyrektywa ng-show w AngularJS?

Składnia ng-show w AngularJS

Przykład ng-show w AngularJS

Co to jest dyrektywa ng-hide w AngularJS?

Składnia ng-hide w AngularJS

Przykład ng-hide w AngularJS

ng-show vs ng-hide vs ng-if: kluczowe różnice

Dyrektywy odbiornika zdarzeń AngularJS

FAQ

Podsumuj ten post następująco:

Zapisz się do newslettera

Wydarzenia AngularJS

Co to jest dyrektywa ng-click w AngularJS?

Składnia ng-click w AngularJS

Przykład ng-click w AngularJS

Co to jest dyrektywa ng-show w AngularJS?

Składnia ng-show w AngularJS

Przykład ng-show w AngularJS

POWIĄZANE ARTYKUŁY

Co to jest dyrektywa ng-hide w AngularJS?

Składnia ng-hide w AngularJS

Przykład ng-hide w AngularJS

ng-show vs ng-hide vs ng-if: kluczowe różnice

Dyrektywy odbiornika zdarzeń AngularJS

FAQ

Podsumuj ten post następująco:

Zapisz się do newslettera