Какво е потребителска директива?
Персонализирана директива в Angular Js е дефинирана от потребителя директива с желаната от вас функционалност. Въпреки че AngularJS има много мощни директиви извън кутията, понякога се изискват персонализирани директиви.
В този урок ще научите -
- Как да създам персонализирана директива?
- Директиви и обхват на AngularJs
- Използване на контролери с директиви
- Как да създадете директиви за многократна употреба
- Директиви и компоненти на AngularJS - ng-transclude
- Вложени директиви
- Обработка на събития в директива
Как да създам персонализирана директива?
Нека да разгледаме пример за това как можем да създадем персонализирана директива.
Потребителската директива в нашия случай просто ще инжектира div таг, който има текст "AngularJS Tutorial" в нашата страница, когато директивата бъде извикана.
Event Registration Guru99 Global Event
Обяснение на кода:
- Първо създаваме модул за нашето ъглово приложение. Това се изисква за създаване на персонализирана директива, защото директивата ще бъде създадена с помощта на този модул.
- Сега създаваме персонализирана директива, наречена "ngGuru" и дефинираме функция, която ще има персонализиран код за нашата директива.
Забележка:-
Имайте предвид, че когато дефинираме директивата, ние я дефинирахме като ngGuru с буквата „G“ като капитал. И когато го достъпваме от нашия div таг като директива, ние го използваме като ng-guru. Ето как angular разбира потребителските директиви, дефинирани в приложение. Първо името на потребителската директива трябва да започва с буквите 'ng'. На второ място символът на тирето „-“ трябва да се споменава само при извикване на директивата. И на трето място, първата буква след буквите „ng“ при дефиниране на директивата може да бъде или с малка, или с главна буква.
- Използваме параметъра на шаблона, който е параметър, дефиниран от Angular за потребителски директиви. В това ние определяме, че когато се използва тази директива, просто използвайте стойността на шаблона и го инжектирайте в извикващия код.
- Тук вече използваме нашата създадена по поръчка директива "ng-guru". Когато направим това, стойността, която дефинирахме за нашия шаблон „Angular JS Tutorial“, сега ще бъде инжектирана тук.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
- Горният изход ясно показва, че нашата потребителска директива ng-guru, която има шаблон, дефиниран за показване на персонализиран текст, се показва в браузъра.
Директиви и обхват на AngularJs
Обхватът се определя като лепилото, което свързва контролера с изгледа чрез управление на данните между изгледа и контролера.
Когато създават персонализирани директиви AngularJs, те по подразбиране ще имат достъп до обекта на обхвата в родителския контролер.
По този начин става лесно за потребителската директива да използва данните, които се предават на главния контролер.
Нека разгледаме пример за това как можем да използваме обхвата на родителски контролер в нашата персонализирана директива.
Event Registration Guru99 Global Event
Обяснение на кода:
- Първо създаваме контролер, наречен "DemoController". В това, ние дефинираме променлива, наречена tutorialName, и я прикачваме към обекта на обхвата в едно изявление - $ scope.tutorialName = "AngularJS".
- В нашата потребителска директива можем да извикаме променливата "tutorialName", като използваме израз. Тази променлива ще бъде достъпна, защото е дефинирана в контролера "DemoController", който ще стане родител за тази директива.
- Препращаме към контролера в div таг, който ще действа като родителски div таг. Имайте предвид, че това трябва да се направи първо, за да може нашата персонализирана директива да има достъп до променливата tutorialName.
- Накрая просто прикачваме нашата персонализирана директива "ng-guru" към нашия div таг.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
- Горният изход ясно показва, че нашата персонализирана директива "ng-guru" използва променливата на обхвата tutorialName в родителския контролер.
Използване на контролери с директиви
Angular дава възможност за достъп до променливата-член на контролера директно от потребителски директиви, без да е необходим обектът на обхвата.
Това понякога става необходимо, тъй като в приложението може да имате множество обекти на обхват, принадлежащи на множество контролери.
Така че има голяма вероятност да допуснете грешка при достъп до обекта на обхват на грешен контролер.
В такъв сценарий има начин специално да се спомене думата „Искам да осъществя достъп до този специфичен контролер“ от моята директива.
Нека да разгледаме един пример за това как можем да постигнем това.
Event Registration Guru99 Global Event
Обяснение на кода:
- Първо създаваме контролер, наречен "DemoController". В това ще дефинираме променлива, наречена "tutorialName" и този път вместо да я прикачим към обекта на обхвата, ще я прикачим директно към контролера.
- В нашата персонализирана директива ние специално споменаваме, че искаме да използваме контролера "DemoController", като използваме ключовата дума за параметър на контролера.
- Създаваме препратка към контролера, използвайки параметъра "controllerAs". Това се определя от Angular и е начинът да се препрати към контролера като референтен.
Забележка: - Възможно е да се осъществи достъп до множество контролери в директива, като се посочат съответните блокове на контролера, контролерите и шаблоните.
- И накрая, в нашия шаблон използваме референцията, създадена в стъпка 3, и използваме променливата член, която беше прикрепена директно към контролера в стъпка 1.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
Резултатът ясно показва, че потребителската директива е особено достъпна до DemoController и прикрепената към нея променлива член tutorialName и показва текста "Angular".
Как да създадете директиви за многократна употреба
Вече видяхме силата на потребителските директиви, но можем да изведем това на следващото ниво, като изградим свои собствени повторно използваеми директиви.
Да кажем например, че искахме да инжектираме код, който винаги да показва долупосочените HTML тагове на множество екрани, което всъщност е само вход за "Името" и "възрастта" на потребителя.
За да използваме повторно тази функция на множество екрани, без да кодираме всеки път, ние създаваме главна контрола или директива в ъгъл, за да задържим тези контроли („Име“ и „възраст“ на потребителя).
Така че сега, вместо да въвеждаме един и същ код за екрана по-долу всеки път, ние всъщност можем да вградим този код в директива и да вградим тази директива по всяко време.
Нека видим пример как можем да постигнем това.
Event Registration Guru99 Global Event
Обяснение на кода:
- В нашия кодов фрагмент за персонализирана директива това, което се променя, е само стойността, която се дава на параметъра на шаблона на нашата персонализирана директива.
Вместо таг или текст от план пет, ние всъщност въвеждаме целия фрагмент от 2 контрола за въвеждане за „Име“ и „възраст“, които трябва да бъдат показани на нашата страница.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
От горния изход можем да видим, че кодовият фрагмент от шаблона на потребителската директива се добавя към страницата.
Директиви и компоненти на AngularJS - ng-transclude
Както споменахме доста по-рано, Angular има за цел да разшири функционалността на HTML. И вече видяхме как можем да инжектираме код, като използваме потребителски директиви за повторна употреба.
Но в съвременното разработване на уеб приложения има и концепция за разработване на уеб компоненти. Което по същество означава създаване на собствени HTML маркери, които могат да се използват като компоненти в нашия код.
Следователно angular предоставя друго ниво на мощност за разширяване на HTML таговете, като дава възможност за инжектиране на атрибути в самите HTML тагове.
Това се прави от маркера " ng-transclude ", който е вид настройка, за да се каже на ъглово да улови всичко, което е поставено в директивата в маркировката.
Нека вземем пример как можем да постигнем това.
Event Registration Guru99 Global Event
Angular JS
Обяснение на кода:
- Използваме директивата, за да дефинираме персонализиран HTML таг, наречен 'pane' и добавяме функция, която ще добави някакъв персонализиран код за този маркер. В изхода нашият персонализиран таг за панел ще покаже текста "AngularJS" в правоъгълник с плътна черна граница.
- Атрибутът "transclude" трябва да бъде посочен като true, което се изисква от angular за инжектиране на този маркер в нашия DOM.
- В обхвата определяме атрибут на заглавието. Атрибутите обикновено се дефинират като двойки име / стойност като: name = "value". В нашия случай името на атрибута в нашия HTML етикет на панела е „заглавие“. Символът "@" е изискването от ъглово. Това се прави така, че когато в стъпка 5 се изпълни заглавието на реда = {{заглавие}}, персонализираният код за атрибута на заглавието се добавя към HTML маркера на панела.
- Персонализираният код за атрибутите на заглавието, който просто очертава плътна черна граница за нашия контрол.
- И накрая, извикваме нашия потребителски HTML таг заедно с атрибута заглавие, който беше дефиниран.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
- Резултатът ясно показва, че атрибутът на заглавието на етикета html5 на панела е зададен на персонализирана стойност на "Angular.JS".
Вложени директиви
Директивите в ъглови могат да бъдат вложени. Подобно на вътрешните модули или функции на всеки език за програмиране, може да се наложи да вградите директиви една в друга.
Можете да разберете по-добре това, като видите следния пример.
В този пример създаваме 2 директиви, наречени "външен" и "вътрешен".
- Вътрешната директива показва текст, наречен "Inner".
- Докато външната директива всъщност извиква вътрешната директива, за да покаже текста, наречен "Inner".
Guru99 Global Event