AngularJS ng-click, ng-show & ng-hide Direktifleri

By: James Hartman James Hartman
Hours Güncellenmiş

⚡ Akıllı Özet

AngularJS olayları, bir web uygulamasının fare tıklamaları, tuş vuruşları ve fareyle üzerine gelme eylemleri gibi kullanıcı girdilerine yanıt vermesini sağlar. ng-click, ng-show ve ng-hide gibi yönergeler, bu davranışı manuel DOM dinleyicileri yerine işaretleme dilinde bildirimsel olarak bağlar.

  • 🖱️ Tıklama İşleme: `ng-click`, bir ifadeyi veya denetleyici işlevini bir öğeye, çoğunlukla bir düğmeye bağlar.
  • 🇧🇷 Koşullu Görüntüleme: `ng-show` ifadesi doğru olduğunda bir öğeyi gösterirken, `ng-hide` ifadesi doğru olmadığında onu kaldırır.
  • 🎨 Mekanizması: Her iki yönerge de, öğenin DOM'da kalmasını sağlamak için display özelliğini none olarak ayarlayan yerleşik ng-hide CSS sınıfını değiştirir.
  • 🔗 Kapsam Bağlama: `$scope` üzerine yerleştirilen bir üye değişkeni görünürlüğü kontrol eder ve bir işleyici içinde bu değişkeni değiştirmek görünümü anında günceller.
  • ???? Yönerge Aralığı: On sekiz dinleyici yönergesi bulanıklaştırma, değiştirme, odaklanma, klavye, fare, yapıştırma ve gönderme olaylarını kapsar.
  • ⚠️ Destek Durumu: AngularJS'nin kullanım ömrü 31 Aralık 2021'de sona erdi, bu nedenle yeni projeler modern Angular'ı hedeflemelidir.
Devamını Oku

AngularJS ng-click ng-show ng-hide Direktifleri

AngularJS Etkinlikleri

AngularJS Etkinlikleri Olaylar, web uygulamalarının fare tıklamaları, klavye girişi ve fareyle üzerine gelme gibi kullanıcı girdileriyle etkileşim kurmasını sağlayan işlevlerdir. Web uygulamalarında belirli görevleri ve eylemleri gerçekleştirmek için olayların işlenmesi gerekir ve her biri kullanıcı ilgili eylemi gerçekleştirdiğinde tetiklenir.

Web uygulamaları oluştururken, er ya da geç uygulamanızın fare tıklamaları ve hareketleri, klavye tuşlarına basma ve değişiklik olayları gibi DOM olaylarını ele alması gerekecektir. angularjs Bu olayları bildirimsel olarak ele alan yönergeler sağlar.

Örneğin, sayfadaki bir butona tıklandığında bir işlem yapılması gerekiyorsa, ng-click olay yönergesi bu işlevi yerine getirir.

⚠️ Destek bildirimi: AngularJS'ye ulaşıldı 31 Aralık 2021 tarihinde yaşamının sonuna ulaştı. ve Angular ekibinden başka yama veya güvenlik düzeltmesi almaz. Aşağıdaki yönergeler, mevcut AngularJS 1.x uygulamalarının bakımı için geçerlidir; yeni çalışmalar için modern yönergeleri kullanın. AçısalBu direktiflerin yerine olay bağlamaları gibi ifadeler kullanılır. (click) ve tarafından *ngIf.

AngularJS'de ng-click Yönergesi nedir?

MKS “ng-tıklama yönergesi” AngularJS'de `<script>` etiketi, bir HTML öğesine tıklandığında özel bir davranış uygular. Genellikle düğmelerde kullanılır, çünkü tıklama yanıtlarını eklemek için en yaygın yer düğmelerdir ve ayrıca tıklama üzerine uyarılar oluşturmak için de kullanılır.

AngularJS'de ng-click sözdizimi

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

AngularJS'de ng-click örneği

Bu ng-click örneğinde, kullanıcı bir düğmeye her tıkladığında sayaç değişkeni artar.

AngularJS'de ng-click Yönergesi

<!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 Açıklama:

  1. `ng-init` yönergesi yerel değişkeni ayarlar. count 0 için.
  2. Düğmedeki ng-click yönergesi artırır. count Her tıklamada 1 artar.
  3. İnterpolasyon {{count}} Geçerli değeri kullanıcıya gösterir.

Çıktı:

AngularJS'de ng-tıklayın

Artırma düğmesi görüntülenir ve sayım başlangıçta sıfırdır. Aşağıdaki resimde gösterildiği gibi, üzerine tıklanması değeri artırır.

AngularJS'de ng-tıklayın

AngularJS'de ng-show Direktifi nedir?

MKS ng-show yönergesi belirli bir şeyi gösterir veya gizler HTML ng-show özniteliğine verilen ifadeye bağlı olarak öğeyi gösterir veya gizler. Dahili olarak, öğe, ifadeyi kaldırarak veya ekleyerek gösterilir veya gizlenir. .ng-hide CSS sınıfı, ayarları belirleyen önceden tanımlanmış bir sınıftır. display için none.

AngularJS'de ng-show'un sözdizimi

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

AngularJS'de ng-show örneği

Bu örnekte, gizli bir öğeyi göstermek için `ng-show` kullanılmıştır.

AngularJS'de ng-show Direktifi

<!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 Açıklama:

  1. Düğmedeki ng-click yönergesi bir şeye referans verir. ShowHide kontrol cihazında tanımlanan fonksiyon DemoController.
  2. `ng-show` özniteliği, "Angular" metnini içeren div öğesine eklenir. Görünürlüğü kontrol edilen öğe budur.
  3. Kontrol ünitesinde, IsVisible Üye değişkeni, kapsam nesnesine yerleştirilir ve başlatılır. falseBu nedenle, sayfa ilk yüklendiğinde div gizlenir. ng-show ile, bir değer gerçek öğeyi görüntüler ve yanlış Onu gizliyor.
  4. MKS ShowHide fonksiyon kümeleri IsVisible true olarak ayarlayın, böylece div görünür hale gelir.

Çıktı:

AngularJS'de ng-show Direktifi

Metni içeren div başlangıçta gösterilmez, çünkü IsVisible Yanlış olarak başlıyor. Tıklama Açısal Göster Değeri true olarak ayarlarsanız metin görünür hale gelir.

AngularJS'de ng-show Direktifi

İLGİLİ MAKALELER

AngularJS'de ng-hide Direktifi nedir?

MKS ng-hide yönergesi İfadesi TRUE olduğunda bir öğeyi gizler ve ifadesi FALSE olduğunda öğeyi gösterir; bu, ng-show'un tam tersidir. Dahili olarak aynı yapıyı kullanır. .ng-hide CSS sınıfı.

AngularJS'de ng-hide'ın sözdizimi

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

AngularJS'de ng-hide örneği

Bu örnek, ng-show örneğini yansıtıyor, böylece iki yönerge doğrudan karşılaştırılabilir.

AngularJS'de ng-hide Direktifi

<!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 Açıklama:

  1. Düğmedeki ng-click yönergesi, şuna referans verir: ShowHide içinde işlemek DemoController.
  2. MKS ng-gizle Bu özellik, "Angular" metnini içeren div'e eklenmiştir.
  3. IsVisible başlatılır falseBu ng-show değil ng-hide olduğu için, false değeri div'in gizlendiği anlamına gelir. gözle görülür Sayfa ilk yüklendiğinde.
  4. MKS ShowHide fonksiyon kümeleri IsVisible true olarak ayarlamak, div'i gizler.

Çıktı:

AngularJS'de ng-hide Direktifi

Div başlangıçta gösteriliyor çünkü ng-hide'a false değeri geçiriliyor. Tıklama Angular'ı Gizle Doğruluk geçer ve kelime kaybolur.

AngularJS'de ng-hide Direktifi

ng-show vs ng-hide vs ng-if: Temel Farklılıklar

Üç yönerge, kullanıcının bir öğeyi görüp görmeyeceğini kontrol eder ve bunlar arasında seçim yapmak hem davranışı hem de görüntüleme performansını etkiler. İlk ikisi yalnızca bir CSS sınıfını değiştirir, bu nedenle öğe her zaman sayfada bulunur; üçüncüsü ise öğeyi ekler ve kaldırır.

Görünüş ng-gösteri ng-gizle ng-eğer
Öğe görünür olduğunda İfade doğrudur. İfade yanlıştır. İfade doğrudur.
DOM'daki öğe Daima Daima Yalnızca doğru olduğu sürece
Kullanılan yöntem Toggles .ng-hide sınıfı Toggles .ng-hide sınıfı Elementi oluşturur ve yok eder.
Çocuk kapsamı Üst kapsamı paylaşır. Üst kapsamı paylaşır. Yeni bir alt kapsam oluşturur.
Gizlendiğinde gözcüler Hala aktif Hala aktif çıkarıldı
İçin en iyisi Işık içeriğinin sık sık değiştirilmesi Ters koşullar Ağır içerik nadiren gösterilir.

Bir öğe sık sık değiştiriliyorsa `ng-show` veya `ng-hide` kullanın, çünkü bu öğe asla yeniden oluşturulmaz ve değiştirme işlemi yalnızca sınıf değişikliğine mal olur. Nadiren gösterilen ve maliyetli bölümler için `ng-if` kullanın, çünkü öğenin kaldırılması aynı zamanda izleyicilerini de kaldırır ve her döngüdeki özetleme maliyetini azaltır.

AngularJS Olay Dinleyici Yönergeleri

AngularJS olay dinleyicilerini HTML öğelerine eklemek için aşağıdakilerden birini veya birkaçını kullanabilirsiniz. direktifler:

  • bulanıklık
  • ng-değişim
  • ng-tıklama
  • ng-kopya
  • kesilmiş
  • ng-dblclick
  • ng-odak
  • ng-tuş aşağı
  • ng tuşuna basma
  • ng-keyup
  • fare aşağı
  • ng-fare girişi
  • ng-fare yaprağı
  • fare hareketi
  • fareyle üzerine gelme
  • ng-fare-up
  • ng-yapıştır
  • ng-gönder

Her yönerge bir ifade kabul eder ve ham tarayıcı olayı bunun içinde kullanılabilir durumdadır. $event İşlem yöneticisinin basılan tuş veya tıklama koordinatları gibi ayrıntılara ihtiyaç duyduğu durumlarda.

SSS

Rezervasyonlu geçişi yapın $event değişken, örneğin ng-click="handle($event)"Ardından denetleyici yerel olayı alır ve hedefi, koordinatları okuyabilir veya preventDefault'u çağırabilir.

`ng-repeat` her öğe için bir alt kapsam oluşturur, bu nedenle işleyici içinde bir temel veri türü atamak yalnızca o alt öğeyi günceller. Üst kapsamdaki bir nesne özelliğine yazın veya şunu kullanın: $parentDeğişikliğin dışarıdan görünür olmasını sağlamak için.

Kısmen. AI araçlar ng-click'i dönüştürür (click) ve ng-show'a *ngIf Güvenilir bir şekilde çalışır, ancak kapsam bağımlı mantık ve çift yönlü bağlamalar manuel inceleme gerektirir, çünkü AngularJS kapsamının Angular'da doğrudan bir karşılığı yoktur.

Yapay zekâ asistanları, olağan nedenleri hızla tespit eder: eksik bir ng-app, modül kaydıyla eşleşmeyen bir denetleyici adı veya yönerge özniteliğinde bir yazım hatası. Önerilen çözümün tarayıcıda test edilmesi gerekiyor.

Hayır. AngularJS yalnızca ng-show, ng-hide ve ng-if yönergelerini sunar. ng-visible yönergesi yoktur ve ona referans vermek hiçbir etki yaratmaz çünkü AngularJS tanınmayan öznitelikleri yok sayar.

Bu yazıyı şu şekilde özetleyin: