ПЕРСОНАЛИЗИРАНИ директиви в AngularJS: Как да създадете? [Примери]
Какво е персонализирана директива?
A Персонализирана директива в AngularJS е дефинирана от потребителя директива, която предоставя на потребителите да използват желаните функции за разширяване на HTML функционалността. Може да се дефинира с помощта на функцията „директива“ и замества елемента, за който се използва. Въпреки че AngularJS има много мощни директиви извън кутията, понякога се изискват персонализирани директиви.
Как да създадете персонализирана директива?
Нека да разгледаме пример за това как можем да създадем персонализирана директива AngularJS.
Персонализираната директива в нашия случай просто ще инжектира div таг, който има текста „AngularJS Tutorial“ в нашата страница, когато директивата бъде извикана.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { template: '<div>Angular JS Tutorial</div>' } }); </script> </body> </html>
Обяснение на кода
- Първо създаваме a модул за нашето ъглово приложение. Това е необходимо за създаване на персонализирана директива, тъй като директивата ще бъде създадена с помощта на този модул.
- Сега създаваме персонализирана директива, наречена „ngGuru“ и дефинираме функция, която ще има персонализиран код за нашата директива.Забележка: - Имайте предвид, че когато дефинирахме директивата, ние я дефинирахме като ngGuru с буквата 'G' като главна. И когато имаме достъп до него от нашия div таг като директива, ние осъществяваме достъп до него като ng-guru. Ето как angular разбира персонализираните директиви, дефинирани в приложение. Първо името на персонализираната директива трябва да започва с буквите 'ng'. Второ, символът на тире '-' трябва да се споменава само при извикване на директивата. И трето, първата буква след буквите 'ng' при дефиниране на директивата може да бъде малка или главна.
- Използваме параметъра на шаблона, който е параметър, дефиниран от Angular за персонализирани директиви. В това ние дефинираме, че винаги, когато се използва тази директива, просто използвайте стойността на шаблона и я инжектирайте в извикващия код.
- Тук сега използваме нашата специално създадена директива „ng-guru“. Когато направим това, стойността, която сме дефинирали за нашия шаблон " Урок за Angular JS ” сега ще се инжектира тук.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.
Изход:
Горният резултат ясно показва, че нашата персонализирана директива ng-guru, която има шаблона, дефиниран за показване на персонализиран текст, се показва в браузъра.
AngularJs директиви и обхвати
Обхватът се определя като спойката, която свързва контролера с изгледа чрез управление на данните между изгледа и контролера.
Когато създавате персонализирани AngularJs директиви, те по подразбиране ще имат достъп до обекта на обхвата в родителския контролер.
По този начин става лесно за персонализираната директива да използва данните, които се предават на главния контролер.
Нека разгледаме пример за персонализирана директива AngularJS за това как можем да използваме обхвата на родителски контролер в нашата персонализирана директива.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorialName = "Angular JS"; }); app.directive('ngGuru',function(){ return { template: '<div>{{tutorialName}}</div>' } }); </script> </body> </html>
Обяснение на кода
- Първо създаваме контролер, наречен „DemoController“. В това ние дефинираме променлива, наречена tutorialName, и я прикрепяме към обекта на scope в един израз – $scope.tutorialName = „AngularJS“.
- В нашата персонализирана директива можем да извикаме променливата „tutorialName“ с помощта на израз. Тази променлива ще бъде достъпна, защото е дефинирана в контролера „DemoController“, който ще стане родител за тази директива.
- Ние препращаме към контролера в div таг, който ще действа като родителски div таг. Имайте предвид, че това трябва да се направи първо, за да може нашата персонализирана директива да има достъп до променливата tutorialName.
- Накрая просто прикачваме нашата персонализирана директива „ng-guru“ към нашия div таг.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.
Изход:
Горният резултат ясно показва, че нашата персонализирана директива „ng-guru“ използва променливата на обхвата tutorialName в родителския контролер.
Използване на контролери с директиви
Angular дава възможност за достъп до членската променлива на контролера директно от персонализирани директиви без необходимост от обекта на обхвата.
Това понякога става необходимо, защото в едно приложение може да имате множество обекти на обхват, принадлежащи на множество контролери.
Така че има голяма вероятност да направите грешката да получите достъп до обекта на обхвата на грешния контролер.
В такъв сценарий има начин конкретно да се спомене „Искам да получа достъп до този конкретен контролер“ от моята директива.
Нека да разгледаме пример как можем да постигнем това.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <div ng-guru99=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function() { this.tutorialName = "Angular"; }); app.directive('ngGuru99',function(){ return { controller: 'DemoController', controllerAs: 'ctrl', template: '{{ctrl.tutorialName}}' }; }); </script> </body> </html>
Обяснение на кода
- Първо създаваме контролер, наречен „DemoController“. В това ще дефинираме променлива, наречена „tutorialName“ и този път вместо да я прикрепим към обекта на обхвата, ще я прикрепим директно към контролера.
- В нашата персонализирана директива ние специално споменаваме, че искаме да използваме контролера „DemoController“, като използваме ключовата дума за параметър на контролера.
- Създаваме препратка към контролера с помощта на параметъра „controllerAs“. Това е дефинирано от Angular и е начинът за препратка към контролера като референция.
- И накрая, в нашия шаблон ние използваме препратката, създадена в стъпка 3, и използваме членската променлива, която беше прикрепена директно към контролера в стъпка 1.
Забележка: -Възможно е достъп до множество контролери в директива чрез указване на съответни блокове на контролера, controllerAs и шаблонни изрази.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.
Изход:
Резултатът ясно показва, че персонализираната директива има достъп по-специално до DemoController и членската променлива tutorialName, прикрепена към него, и показва текста „Angular“.
Как да създадете директиви за многократна употреба
Вече видяхме силата на персонализираните директиви, но можем да изведем това на следващото ниво, като изградим наши собствени повторно използваеми директиви.
Да кажем, например, че искахме да инжектираме код, който винаги ще показва долупосочените HTML тагове на множество екрани, което всъщност е просто вход за „Име“ и „възраст“ на потребителя.
За да използваме повторно тази функция на множество екрани без кодиране всеки път, ние създаваме главна контрола или директива в angular, за да държи тези контроли („Име“ и „възраст“ на потребителя).
Така че сега, вместо да въвеждаме един и същ код за екрана по-долу всеки път, ние всъщност можем да вградим този код в директива и да вградим тази директива във всеки един момент.
Нека видим пример как можем да постигнем това.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { template: ' Name <input type="text"><br><br> Age<input type="text">' }; }); </script> </body> </html>
Обяснение на кода
- В нашия кодов фрагмент за персонализирана директива това, което се променя, е само стойността, която се дава на параметъра на шаблона на нашата персонализирана директива. Вместо таг или текст на план пет, ние всъщност въвеждаме целия фрагмент от 2 контроли за въвеждане за „ Име“ и „възраст“, които трябва да бъдат показани на нашата страница.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.
Изход:
От горния резултат можем да видим, че кодовият фрагмент от шаблона на персонализираната директива се добавя към страницата.
AngularJS Директиви и компоненти – ng-transclude
Както споменахме доста по-рано, Angular има за цел да разшири функционалността на HTML. И вече видяхме как можем да имаме инжектиране на код чрез използване на персонализирани повторно използваеми директиви.
Но в съвременната разработка на уеб приложения има и концепция за разработване на уеб компоненти. Което основно означава създаване на наши собствени HTML тагове, които могат да се използват като компоненти в нашия код.
Следователно angular предоставя друго ниво на мощност за разширяване на HTML тагове, като дава възможност за инжектиране на атрибути в самите HTML тагове.
Това се прави от „ng-включване”, който е един вид настройка, за да каже на angular да улови всичко, което е поставено вътре в директивата в маркирането.
Нека вземем пример как можем да постигнем това.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <pane title="{{title}}">Angular JS</pane> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('pane',function(){ return { transclude:true, scope :{title:'@'}, template: '<div style="border: 1px solid black;"> '+ '<ng-transclude></ng-transclude>'+ '</div>' }; }); </script> </body> </html>
Обяснение на кода
- Използваме директивата, за да дефинираме персонализиран HTML таг, наречен „панел“, и добавяме функция, която ще постави някакъв персонализиран код за този маркер. В изхода нашият персонализиран етикет на панела ще покаже текста „AngularJS“ в правоъгълник с плътна черна рамка.
- Атрибутът „transclude“ трябва да бъде споменат като true, което се изисква от angular, за да инжектира този етикет в нашия DOM.
- В обхвата дефинираме атрибут за заглавие. Атрибутите обикновено се дефинират като двойки име/стойност като: име=”стойност”. В нашия случай името на атрибута в нашия панел HTML таг е „заглавие“. Символът “@” е изискването от angular. Това се прави така, че когато редът title={{title}} се изпълни в стъпка 5, потребителският код за атрибута title се добавя към HTML тага на панела.
- Персонализираният код за атрибутите на заглавието, който просто рисува плътна черна рамка за наш контрол.
- И накрая, ние извикваме нашия персонализиран HTML таг заедно с атрибута title, който беше дефиниран.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.
Изход:
- Резултатът ясно показва, че атрибутът заглавие на html5 тага на панела е зададен на персонализираната стойност на „Angular.JS“.
Вложени директиви
Директивите в AngularJS могат да бъдат вложени. Като само вътрешни модули или функции във всеки програмен език, може да се наложи да вградите директиви една в друга.
Можете да разберете по-добре това, като видите примера по-долу.
В този пример създаваме 2 директиви, наречени „външен“ и „вътрешен“.
- Вътрешната директива показва текст, наречен „Inner“.
- Докато външната директива всъщност прави повикване към вътрешната директива, за да покаже текста, наречен „Inner“.
</head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <outer></outer> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('outer',function(){ return { restrict:'E', template: '<div><h1>Outer</h1><inner></inner></div>', }}); app.directive('inner',function(){ return { restrict:'E', template: '<div><h1>Inner</h1></div>', } }); </script> </body> </html>
Обяснение на кода
- Създаваме директива, наречена „външна“, която ще се държи като нашата родителска директива. След това тази директива ще извика „вътрешната“ директива.
- Ограничението: 'E' се изисква от angular, за да се гарантира, че данните от вътрешната директива са достъпни за външната директива. Буквата "Е" е кратката форма на думата "Елемент".
- Тук създаваме вътрешната директива, която показва текста „Inner“ в div таг.
- В шаблона за външната директива (стъпка №4), ние извикваме вътрешната директива. Така че тук ние инжектираме шаблона от вътрешната директива към външната директива.
- И накрая, ние директно извикваме външната директива.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.
Изход:
От изхода,
- Може да се види, че както външната, така и вътрешната директива са извикани и текстът в двата div тагова се показва.
Обработка на събития в директива
Събития такива кликвания на мишката или бутони могат да се обработват от самите директиви. Това става с помощта на функцията за връзка. Функцията за връзка е това, което позволява на директивата да се прикрепи към DOM елементите в HTML страница.
Синтаксис:
Синтаксисът на елемента link е както е показано по-долу
link: function ($scope, element, attrs)
Функцията за свързване обикновено приема 3 параметъра, включително обхвата, елемента, с който е свързана директивата, и атрибутите на целевия елемент.
Нека да разгледаме пример как можем да постигнем това.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru="">Click Me</div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { link:function($scope,element,attrs) { element.bind('click',function () { element.html('You clicked me'); });} }}); </script> </body> </html>
Обяснение на кода
- Ние използваме функцията за свързване, както е дефинирана в angular, за да дадем възможност на директивите за достъп до събития в HTML DOM.
- Използваме ключовата дума „element“, защото искаме да отговорим на събитие за HTML DOM елемент, който в нашия случай ще бъде елементът „div“. След това използваме функцията „свързване“ и казваме, че искаме да добавим персонализирана функционалност към събитието за кликване на елемента. Думата 'click' е ключовата дума, която се използва за обозначаване на събитието click на всяка HTML контрола. Например контролата на HTML бутона има събитието click. Тъй като в нашия пример искаме да добавим персонализиран код към събитието за щракване на нашия маркер „dev“, ние използваме ключовата дума „click“.
- Тук казваме, че искаме да заменим вътрешния HTML на елемента (в нашия случай елемента div) с текста „Щракнахте върху мен!“.
- Тук дефинираме нашия таг div да използва персонализираната директива ng-guru.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.
Изход:
- Първоначално текстът „Щракнете върху мен“ ще бъде показан на потребителя, защото това е първоначално дефинираното в тага div. Когато действително щракнете върху тага div, ще се покаже изходът по-долу
Oбобщение
- Човек може също да създаде персонализирана директива, която може да се използва за инжектиране на код в основното ъглово приложение.
- Персонализираните директиви могат да бъдат направени за извикване на членове, дефинирани в обекта на обхвата в определен контролер, като се използват ключовите думи „Controller“, „controllerAs“ и „template“.
- Директивите могат също да бъдат вложени, за да осигурят вградена функционалност, която може да е необходима в зависимост от нуждите на приложението.
- Директивите също могат да бъдат направени повторно използваеми, така че да могат да се използват за инжектиране на общ код, който може да се изисква в различни уеб приложения.
- Директивите могат също да се използват за създаване на персонализирани HTML тагове, които биха имали собствена функционалност, дефинирана според бизнес изискванията.
- Събитията могат също да се обработват от директиви за обработка на DOM събития като щраквания на бутони и мишка.