Когато създавате уеб-базирани приложения, рано или късно вашето приложение ще трябва да обработва 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, за да зададем стойността на броя на локалната променлива на 0.
- След това въвеждаме директивата за събитие ng-click за бутона. В тази директива пишем код, за да увеличим стойността на променливата count с 1.
- Тук показваме стойността на променливата count на потребителя.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
От горния изход,
- Можем да видим, че бутонът "Увеличаване" се показва и стойността на променливата за броене първоначално е нула.
- Когато кликнете върху бутона Increment, стойността на броя се увеличава съответно, както е показано на изходното изображение по-долу.
Какво представлява директивата ng-show?
Директивата ng-Show се използва за показване или скриване на даден HTML елемент въз основа на израза, предоставен на атрибута ngShow. На заден план елементът се показва или скрива чрез премахване или добавяне на .ng-hide CSS класа върху елемента.
На заден план елементът се показва или скрива чрез премахване или добавяне на .ng-hide CSS класа към елемента.
Нека разгледаме пример за това как можем да използваме директивата "ngshow event", за да покажем скрит елемент.
Event Registration Guru99 Global Event
Angular
Обяснение на кода:
- Прикачваме директивата за събитие ng-click към елемента бутон. Тук имаме препратка към функция, наречена "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. Ако изразът е FALSE, елементът ще бъде показан. На заден план елементът се показва или скрива чрез премахване или добавяне на .ng-hide CSS класа върху елемента.
От друга страна с ng-hide, елементът е скрит, ако изразът е истина и ще бъде показан, ако е невярно.
Нека да разгледаме подобния пример като този, показан за ngShow, за да покажем как може да се използва атрибутът ngHide.
Event Registration Guru99 Global Event
Angular
Обяснение на кода:
- Прикачваме директивата за събитие ng-click към елемента бутон. Тук имаме препратка към функция, наречена ShowHide, която е дефинирана в нашия контролер - DemoController.
- Прикачваме атрибута ng-hide към div таг, който съдържа текста Angular. Това е етикетът, който ще покажем / скрием въз основа на атрибута ng-show.
- В контролера прикачваме променливата isVisible член към обекта на обхвата. Този атрибут ще бъде предаден на ъглов атрибут ng-show, за да контролира видимостта на контрола div. Първоначално настройваме това на false, така че при първото показване на страницата div тагът ще бъде скрит.
- Добавяме код към функцията ShowHide, която ще зададе променливата IsVisible на член true, за да може тагът div да бъде показан на потребителя.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
От изхода,
- Първоначално можете да видите, че тагът div, който има текст "AngularJs", първоначално се показва, защото стойността на свойството false се изпраща към директивата ng-hide.
- Когато щракнем върху бутона "Hide Angular", стойността на свойството true will се изпраща до директивата ng-hide. Следователно ще бъде показан изходът по-долу, в който думата "Angular" ще бъде скрита.
Директиви на AngularJS за слушатели на събития
Можете да добавите слушатели на събития AngularJS към вашите HTML елементи, като използвате една или повече от тези директиви:
- ng-размазване
- ng-промяна
- ng-щракване
- ng-copy
- ng-cut
- ng-dblclick
- ng-фокус
- ng-keydown
- натискане на клавиш ng
- ng-клавиш
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-курсора на мишката
- ng-mouseup
- ng-паста
Обобщение
- Директивите за събития се използват в Angular за добавяне на персонализиран код, за да се отговори на събития, генерирани от намесата на потребителя, като кликвания върху бутони, щраквания на клавиатура и мишка и т.н.
- Най-често срещаната директива за събития е директивата ng-click, която се използва за обработка на събития за щракване. Най-често се използва това за щракване на бутони, при което код може да бъде добавен в отговор на щракване върху бутон.
- HTML елементите също могат да бъдат скрити или показани на потребителя съответно чрез използване на ъглови атрибути ng-show и ng-hide.