Створюючи веб-програми, рано чи пізно вашій програмі потрібно буде обробляти події DOM, такі як клацання миші, переміщення, натискання клавіатури, зміни подій тощо
AngularJS може додати функціональність, яка може використовуватися для обробки таких подій.
Наприклад, якщо на сторінці є кнопка, і ви хочете щось обробити при натисканні кнопки, ми можемо використовувати директиву події ng-click.
Ми детально розглянемо директиви подій під час цього курсу.
У цьому підручнику ви дізнаєтесь-
- Що таке директива ng-click?
- Що таке директива ng-show?
- Що таке директива ng-hide?
Що таке директива ng-click?
«Нг-клік директива» використовується для застосування користувальницького поведінки, коли елемент в HTML клацнув. Зазвичай це використовується для кнопок, оскільки це найпоширеніше місце для додавання подій, які відповідають на клацання, виконані користувачем
Давайте розглянемо простий приклад того, як ми можемо реалізувати подію кліку.
У цьому прикладі ми матимемо змінну лічильника, яка збільшуватиме значення, коли користувач натискає кнопку.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Пояснення коду:
- Спочатку ми використовуємо директиву ng-init, щоб встановити значення локальної змінної count до 0.
- Потім ми вводимо директиву події ng-click для кнопки. У цій директиві ми пишемо код, щоб збільшити значення змінної count на 1.
- Тут ми відображаємо користувачеві значення змінної count.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
З вищенаведеного виводу,
- Ми бачимо, що відображається кнопка "Збільшити", а значення змінної count спочатку дорівнює нулю.
- Коли ви натискаєте кнопку Збільшити, значення підрахунку збільшується відповідно, як показано на вихідному зображенні нижче.
Що таке директива ng-show?
Директива ng-Show використовується для показу або приховування заданого елемента HTML на основі виразу, наданого атрибуту ngShow. У фоновому режимі елемент відображається або приховується шляхом видалення або додавання до елемента класу CSV .ng-hide.
У фоновому режимі елемент відображається або приховується шляхом видалення або додавання до елемента класу CSV .ng-hide.
Давайте розглянемо приклад того, як ми можемо використовувати директиву "ngshow event" для відображення прихованого елемента.
Event Registration Guru99 Global Event
Angular
Пояснення коду:
- Ми додаємо директиву події ng-click до елемента button. Тут ми посилаємось на функцію "ShowHide", яка визначена в нашому контролері - DemoController.
- Ми приєднуємо атрибут ng-show до тегу div, який містить текст Angular. Це тег, який ми будемо показувати / приховувати на основі атрибута ng-show.
-
У контролері ми приєднуємо змінну-член "IsVisible" до об'єкта сфери дії. Цей атрибут буде переданий кутовому атрибуту ng-show (крок # 2) для управління видимістю елемента керування div. Спочатку ми встановлюємо для цього значення false, так що при першому відображенні сторінки тег div буде прихований.
Примітка: - Коли для атрибутів ng-show встановлено значення true, користувачеві буде показано наступне керування, яке в нашому випадку є тегом div. Якщо для атрибута ng-show встановлено значення false, елемент керування буде прихований від користувача.
- Ми додаємо код до функції ShowHide, яка встановить для змінної-члена IsVisible значення true, щоб тег div міг відображатися користувачеві.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід: 1
З виходу,
- Ви можете спочатку побачити, що тег div, який має текст "AngularJS", не відображається, і це тому, що для об'єкта isVisible спочатку встановлено значення false, яке потім передається директиві ng-show тегу div.
- Коли ви натискаєте кнопку "Показати AngularJS", вона змінює змінну-член isVisible на істинну, а отже, текст "Angular" стає видимим для користувача. Наведений нижче результат буде показано користувачеві.
На виході тепер відображається тег div з текстом Angular.
Що таке директива ng-hide?
З директивою ng-hide елемент буде прихований, якщо вираз має значення TRUE. Якщо вираз ФАЛЬШЕ, елемент буде показаний. У фоновому режимі елемент відображається або приховується шляхом видалення або додавання до елемента класу CSV .ng-hide.
З іншого боку, за допомогою ng-hide елемент прихований, якщо вираз є істинним, і він буде показаний, якщо він хибний.
Давайте розглянемо подібний приклад, який показаний для ngShow, щоб продемонструвати, як можна використовувати атрибут ngHide.
Event Registration Guru99 Global Event
Angular
Пояснення коду:
- Ми додаємо директиву події ng-click до елемента button. Тут ми посилаємось на функцію ShowHide, яка визначена в нашому контролері - DemoController.
- Ми приєднуємо атрибут ng-hide до тегу div, який містить текст Angular. Це тег, який ми будемо показувати / приховувати на основі атрибута ng-show.
- У контролері ми приєднуємо змінну-член isVisible до об'єкта сфери. Цей атрибут буде переданий кутовому атрибуту ng-show для управління видимістю елемента керування div. Спочатку ми встановлюємо для цього значення false, так що при першому відображенні сторінки тег div буде прихований.
- Ми додаємо код до функції ShowHide, яка встановить для змінної-члена IsVisible значення true, щоб тег div міг відображатися користувачеві.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
З виходу,
- Ви можете спочатку побачити, що тег div, який має текст "AngularJs", спочатку відображається, оскільки значення властивості false надсилається директиві ng-hide.
- Коли ми натискаємо кнопку "Сховати кутовий", значення властивості true will надсилається директиві ng-hide. Отже, буде показано нижченаведений результат, в якому буде приховано слово "Angular".
Директиви про прослуховувач подій AngularJS
Ви можете додати прослуховувачі подій AngularJS до ваших елементів HTML, використовуючи одну або кілька з цих директив:
- нг-розмиття
- нг-зміна
- клацніть нг
- ng-copy
- нг-виріз
- ng-dblclick
- нг-фокус
- нг-клавіатура
- натискання клавіші нг
- нг-клавіатура
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- нг-наведення миші
- ng-mouseup
- нг-паста
Резюме
- Директиви подій використовуються в Angular для додавання користувацького коду для реагування на події, породжені втручанням користувача, такі як клацання кнопок, клацання клавіатури та миші тощо
- Найбільш поширеною директивою подій є директива ng-click, яка використовується для обробки подій кліків. Найбільш поширеним використанням цього є натискання кнопок, де код може бути доданий для відповіді на натискання кнопки.
- Елементи HTML також можна приховати або показати користувачеві відповідно, використовуючи кутові атрибути ng-show та ng-hide.