Директиви AngularJS ng-click, ng-show & ng-hide

по: Джеймс Хартман Джеймс Хартман
Hours Обновено

⚡ Умно обобщение

Събитията в AngularJS позволяват на уеб приложението да реагира на потребителски вход, като например кликвания на мишката, натискания на клавиши и действия при задържане на курсора на мишката. Директиви, включително ng-click, ng-show и ng-hide, свързват това поведение декларативно в маркировката, вместо чрез ръчни DOM слушатели.

  • 🖱️ Обработка на кликвания: ng-click прикачва израз или контролерна функция към елемент, най-често бутон.
  • 👁️ Условно показване: ng-show рендира елемент, когато изразът му е true, докато ng-hide го премахва, когато изразът е true.
  • 🎨 Механизъм: И двете директиви превключват вградения CSS клас ng-hide, който задава display на none, така че елементът остава в DOM.
  • 🔗 Обвързване на обхвата: Членска променлива, поставена в $scope, управлява видимостта, а промяната ѝ вътре в манипулатор актуализира изгледа незабавно.
  • 📋 Диапазон на директивата: Осемнадесет директиви за слушатели обхващат събития като blur, change, focus, keyboard, mouse, paste и submit.
  • ⚠️ Състояние на поддръжката: AngularJS достигна края на жизнения си цикъл на 31 декември 2021 г., така че новите проекти трябва да са насочени към съвременния Angular.
Прочетете повече

AngularJS ng-click ng-show ng-hide Директиви

AngularJS събития

AngularJS събития са функционалностите, които позволяват на уеб приложенията да взаимодействат с потребителски входове, като кликвания на мишката, въвеждане от клавиатура и задържане на курсора на мишката. Събитията трябва да се обработват в уеб приложенията, за да се изпълняват специфични задачи и действия, и всяко едно от тях се задейства, когато потребителят извърши съответстващото действие.

Когато създавате уеб приложения, рано или късно приложението ви трябва да обработва DOM събития, като кликвания и движения на мишката, натискания на клавиши и събития за промяна. AngularJS предоставя директиви, които обработват тези събития декларативно.

Например, ако даден бутон на страницата трябва да обработи нещо при щракване, директивата за събитие ng-click предоставя този hook.

⚠️ Известие за поддръжка: Достигнахме AngularJS край на жизнения цикъл на 31 декември 2021 г. и не получава допълнителни корекции или корекции за сигурност от екипа на Angular. Директивите по-долу остават валидни за поддръжка на съществуващи AngularJS 1.x приложения; за нова работа използвайте съвременни ъглов, където тези директиви са заменени от обвързвания на събития, като например (click) и от *ngIf.

Какво е директива ng-click в AngularJS?

- „директива ng-click“ В AngularJS се прилага персонализирано поведение при щракване върху HTML елемент. Обикновено се използва при бутони, тъй като те са най-често срещаното място за прикачване на отговори на щракване, а също така се използва за генериране на предупреждения при щракване.

Синтаксис на ng-click в AngularJS

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

Пример за ng-click в AngularJS

В този пример с ng-click, променливата брояч се увеличава всеки път, когато потребителят щракне върху бутон.

Директива ng-click в 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 Обяснение:

  1. Директивата ng-init задава локалната променлива count да 0.
  2. Директивата ng-click на бутона увеличава count с 1 при всяко кликване.
  3. Интерполацията {{count}} показва текущата стойност на потребителя.

Изход:

ng-щракване в AngularJS

Бутонът „Увеличение“ се показва и първоначалният брой е нула. Щракването върху него увеличава стойността, както е показано на изображението по-долу.

ng-щракване в AngularJS

Какво е директива ng-show в AngularJS?

- директива ng-show показва или скрива дадено HTML елемент, базиран на израза, предоставен на атрибута ng-show. Вътрешно елементът се показва или скрива чрез премахване или добавяне на .ng-hide CSS клас, предварително дефиниран клас, който задава display да се none.

Синтаксис на ng-show в AngularJS

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

Пример за ng-show в AngularJS

Този пример използва ng-show, за да разкрие скрит елемент.

Директива ng-show в 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 Обяснение:

  1. Директивата ng-click на бутона препраща към ShowHide функция, дефинирана в контролера DemoController.
  2. Атрибутът ng-show е прикачен към div-а, съдържащ текста Angular. Това е елементът, чиято видимост се контролира.
  3. В контролера, IsVisible членската променлива се поставя върху обекта на обхвата и се инициализира с false, така че div е скрит при първото зареждане на страницата. С ng-show, стойността на вярно показва елемента и фалшив го крие.
  4. - ShowHide набори от функции IsVisible на true, така че div да стане видим.

Изход:

Директива ng-show в AngularJS

Div-ът, съдържащ текста, не се показва първоначално, защото IsVisible започва като невярно. Щракване Покажи Angular задава го на true и текстът става видим.

Директива ng-show в AngularJS

СВЪРЗАНИ СТАТИИ

Какво е директива ng-hide в AngularJS?

- директива ng-hide скрива елемент, когато изразът му се оцени като TRUE, и показва елемента, когато изразът е FALSE — точно обратното на ng-show. Вътрешно използва същото .ng-hide CSS клас.

Синтаксис на ng-hide в AngularJS

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

Пример за ng-hide в AngularJS

Този пример отразява примера с ng-show, така че двете директиви могат да бъдат сравнени директно.

Директива ng-hide в 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 Обяснение:

  1. Директивата ng-click на бутона препраща към ShowHide функция в DemoController.
  2. - ng-hide Атрибутът е прикачен към div-а, съдържащ текста Angular.
  3. IsVisible се инициализира към falseТъй като това е ng-hide, а не ng-show, стойност false означава, че div е видим когато страницата се зареди за първи път.
  4. - ShowHide набори от функции IsVisible на true, което скрива div-а.

Изход:

Директива ng-hide в AngularJS

Div се показва първоначално, защото на ng-hide се предава false. Щракване Скриване на ъгловото преминава във вярно състояние и думата изчезва.

Директива ng-hide в AngularJS

ng-show срещу ng-hide срещу ng-if: Ключови разлики

Три директиви контролират дали потребителят вижда даден елемент, а изборът между тях влияе както на поведението, така и на производителността при рендиране. Първите две само превключват CSS клас, така че елементът винаги присъства в страницата; третата добавя и премахва самия елемент.

Аспект ng-шоу ng-hide ng-if
Елементът е видим, когато Изразът е верен Изразът е неверен Изразът е верен
Елемент в DOM Винаги Винаги Само докато е вярно
Използван метод Togglклас es .ng-hide Togglклас es .ng-hide Създава и унищожава елемента
Дъщерен обхват Споделя родителския обхват Споделя родителския обхват Създава нов дъщерен обхват
Наблюдатели, когато са скрити Все още активен Все още активен отстранен
Най - доброто за Често превключване на леко съдържание Обърнати условия Тежко съдържание се показва рядко

Използвайте ng-show или ng-hide, когато даден елемент се превключва често, защото елементът никога не се преизгражда и превключването струва само промяна на класа. Използвайте ng-if за скъпи секции, които се показват рядко, тъй като премахването на елемента премахва и неговите наблюдатели и намалява разходите за дайджест на всеки цикъл.

AngularJS директиви за приемане на събития

Можете да добавяте слушатели на събития на AngularJS към HTML елементи, като използвате един или повече от тези директиви:

  • ng-размазване
  • ng-промяна
  • ng-щракване
  • ng-копие
  • нг-изрязване
  • ng-dblclick
  • ng-фокус
  • ng-натискане на клавиши
  • ng-натискане на клавиш
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-преместване на мишката
  • ng-поставяне на мишката
  • ng-mouseup
  • ng-паста
  • ng-подаване

Всяка директива приема израз, а суровото събитие на браузъра е достъпно вътре в него като $event когато обработчикът се нуждае от подробности като натиснатия клавиш или координатите на щракване.

Въпроси и Отговори

Преминете през резервираното $event променлива, както в ng-click="handle($event)"След това контролерът получава собственото събитие и може да прочете целта, координатите или да извика preventDefault.

ng-repeat създава дъщерен обхват за всеки елемент, така че присвояването на примитив вътре в манипулатора актуализира само този дъщерен елемент. Запис в свойство на обект в родителския обхват или използване $parent, за да стане промяната видима отвън.

частично. AI инструменти, конвертиращи ng-click в (click) и ng-show към *ngIf надеждно, но логиката, зависима от обхвата, и двупосочните обвързвания изискват ръчен преглед, защото обхватът на AngularJS няма директен еквивалент в Angular.

Асистентите с изкуствен интелект бързо забелязват обичайните причини: липсващо ng-app, име на контролер, което не съответства на регистрацията на модула, или печатна грешка в атрибута на директивата. Предложеното решение все още се нуждае от тестване в браузъра.

Не. AngularJS предоставя ng-show, ng-hide и ng-if only. Няма директива ng-visible и позоваването на такава не води до ефект, защото AngularJS игнорира неразпознатите атрибути.

Обобщете тази публикация с: