Када креирате веб апликације, пре или касније ваша апликација ће морати да обрађује ДОМ догађаје попут кликова мишем, померања, притиска тастатуре, промене догађаја итд.
АнгуларЈС може додати функционалност која се може користити за обраду таквих догађаја.
На пример, ако на страници постоји дугме и желите нешто да обрадите када се кликне на дугме, можемо да користимо директиву о догађајима нг-цлицк.
Током овог курса детаљно ћемо размотрити смернице догађаја.
У овом упутству ћете научити-
- Шта је нг-цлицк директива?
- Шта је нг-схов директива?
- Шта је нг-хиде директива?
Шта је нг-цлицк директива?
"Нг-клик директива" се користи да се пријаве прилагођени понашање када један елемент у ХТМЛ кликнуо. Ово се обично користи за дугмад, јер је то најчешће место за додавање догађаја који одговарају на кликове које је извршио корисник
Погледајмо једноставан пример како можемо применити догађај клика.
У овом примеру имаћемо променљиву бројача која ће повећавати вредност када корисник кликне на дугме.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Објашњење кода:
- Прво користимо нг-инит директиву да поставимо вредност броја локалних променљивих на 0.
- Затим уводимо нг-цлицк директиву догађаја на дугме. У овој директиви пишемо код да бисмо повећали вредност променљиве цоунт за 1.
- Овде приказујемо вредност променљиве цоунт кориснику.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из горњег резултата,
- Видимо да је приказано дугме „Повећај“ и да је вредност променљиве бројача у почетку нула.
- Када кликнете на дугме Повећај, вредност броја се према томе повећава, као што је приказано на излазној слици испод.
Шта је нг-схов директива?
Директива нг-Схов користи се за приказивање или скривање датог ХТМЛ елемента на основу израза датог атрибуту нгСхов. У позадини се елемент приказује или скрива уклањањем или додавањем ЦСВ класе .нг-хиде на елемент.
У позадини се елемент приказује или скрива уклањањем или додавањем ЦСВ класе .нг-хиде на елемент.
Погледајмо пример како можемо да користимо директиву „нгсхов евент“ за приказ скривеног елемента.
Event Registration Guru99 Global Event
Angular
Објашњење кода:
- Директиви догађаја нг-цлицк прилажемо елементу дугмета. Овде се позивамо на функцију која се назива „СховХиде“ која је дефинисана у нашем контролору - ДемоЦонтроллер.
- Атрибут нг-схов прилажемо див ознаци која садржи текст Ангулар. Ово је ознака коју ћемо показати / сакрити на основу атрибута нг-схов.
-
У контролер додајемо променљиву члана „ИсВисибле“ на објекат опсега. Овај атрибут ће се проследити нг-схов угаоном атрибуту (корак # 2) за контролу видљивости див контроле. У почетку постављамо ово на фалсе, тако да ће се при првом приказивању странице див ознака сакрити.
Напомена: - Када се атрибути нг-схов поставе на тачно, накнадна контрола која је у нашем случају див ознака биће приказана кориснику. Када је атрибут нг-схов постављен на фалсе, контрола ће бити скривена од корисника.
- Додајемо код у функцију СховХиде која ће променљиву члана ИсВисибле поставити на труе, тако да се див ознака може приказати кориснику.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз: 1
Из резултата,
- У почетку можете видети да ознака див која има текст „АнгуларЈС“ није приказана, а то је зато што је објекат опсега исВисибле иницијално постављен на фалсе који се затим прослеђује нг-схов директиви див ознаке.
- Када кликнете на дугме „Прикажи АнгуларЈС“, то мења променљиву члана исВисибле да постане истинита и отуда текст „Ангулар“ постаје видљив кориснику. Излаз у наставку биће приказан кориснику.
Излаз сада приказује див ознаку са угловним текстом.
Шта је нг-хиде директива?
Са директивом нг-хиде елемент ће бити скривен ако је израз ТРУЕ. Ако је израз ФАЛСЕ, елемент ће бити приказан. У позадини се елемент приказује или скрива уклањањем или додавањем ЦСВ класе .нг-хиде на елемент.
С друге стране, са нг-хиде, елемент је скривен ако је израз тачан, а биће приказан ако је нетачан.
Погледајмо сличан пример као онај приказан за нгСхов да покажемо како се може користити нгХиде атрибут.
Event Registration Guru99 Global Event
Angular
Објашњење кода:
- Директиви догађаја нг-цлицк прилажемо елементу дугмета. Овде се позивамо на функцију која се зове СховХиде која је дефинисана у нашем контролеру - ДемоЦонтроллер.
- Атрибут нг-хиде придајемо див ознаци која садржи текст Ангулар. Ово је ознака коју ћемо показати / сакрити на основу атрибута нг-схов.
- У контролер додајемо променљиву члана исВисибле на објект опсега. Овај атрибут ће се проследити нг-схов угаоном атрибуту за контролу видљивости див контроле. У почетку постављамо ово на фалсе, тако да ће се при првом приказивању странице див ознака сакрити.
- Додајемо код у функцију СховХиде која ће променљиву члана ИсВисибле поставити на труе, тако да се див ознака може приказати кориснику.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата,
- У почетку можете да видите да се див ознака која има текст „АнгуларЈс“ првобитно приказује јер се вредност својства фалсе шаље директиви нг-хиде.
- Када кликнемо на дугме „Сакриј угао“, вредност својства труе вилл послана је у директиву нг-хиде. Отуда ће бити приказан доњи излаз у коме ће бити скривена реч „Угаона“.
Упутства за прислушкиваче догађаја АнгуларЈС
Слушатеље догађаја АнгуларЈС можете додати својим ХТМЛ елементима помоћу једне или више ових директива:
- нг-блур
- нг-промена
- нг-клик
- нг-цопи
- нг-цут
- нг-дблцлицк
- нг-фокус
- нг-кеидовн
- нг-тастер
- нг-кеиуп
- нг-моуседовн
- нг-моусеентер
- нг-моуселеаве
- нг-моусемове
- нг-моусеовер
- нг-моусеуп
- нг-пасте
Резиме
- Директиве о догађајима се користе у Ангулар-у за додавање прилагођеног кода да би се одговорило на догађаје генерисане интервенцијом корисника као што су кликови на тастере, кликови на тастатури и мишу итд.
- Најчешћа директива догађаја је нг-цлицк директива која се користи за руковање догађајима клика. Најчешћа употреба овога је за кликове на дугме где се код може додати као одговор на клик на дугме.
- ХТМЛ елементи такође могу бити сакривени или приказани кориснику у складу с тим помоћу нг-схов и нг-хиде угаоних атрибута.