Шта је прилагођена директива?
Прилагођена директива у Ангулар Јс је кориснички дефинисана директива са жељеном функционалношћу. Иако АнгуларЈС има пуно моћних директива из кутије, понекад су потребне прилагођене директиве.
У овом упутству ћете научити-
- Како створити прилагођену директиву?
- Директиве и делокруг АнгуларЈс-а
- Коришћење контролера са директивама
- Како створити директиве за вишекратну употребу
- АнгуларЈС директиве и компоненте - нг-трансцлуде
- Угнездене директиве
- Руковање догађајима у директиви
Како створити прилагођену директиву?
Погледајмо пример како можемо створити прилагођену директиву.
Прилагођена директива у нашем случају једноставно ће убризгати див ознаку која на нашој страници има текст "АнгуларЈС Туториал" када се директива позове.
Event Registration Guru99 Global Event
Објашњење кода:
- Прво креирамо модул за нашу угаону апликацију. То је потребно за креирање прилагођене директиве јер ће се директива креирати помоћу овог модула.
- Сада креирамо прилагођену директиву названу „нгГуру“ и дефинишемо функцију која ће имати прилагођени код за нашу директиву.
Белешка:-
Имајте на уму да смо га приликом дефинисања директиве дефинисали као нгГуру са словом „Г“ као главним градом. А када му приступимо из наше див ознаке као директиве, приступамо му као нг-гуру. Тако ангулар разуме прилагођене директиве дефинисане у апликацији. Прво име прилагођене директиве треба да започиње словима 'нг'. Друго, цртица '-' треба спомињати само приликом позивања директиве. И треће, прво слово иза слова 'нг' приликом дефинисања директиве може бити или мало или велико.
- Користимо параметар предлошка који је параметар дефинисан од стране Ангулар за прилагођене директиве. У овоме дефинишемо да кад год се користи ова директива, онда само употребите вредност шаблона и убризгајте је у позивни код.
- Овде сада користимо нашу прилагођену „нг-гуру“ директиву. Када то урадимо, вредност коју смо дефинисали за наш образац „<див> Водич за кутне ЈС “ сада ће бити убачена овде.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
- Горњи излаз јасно показује да се наша прилагођена нг-гуру директива, која има шаблон дефинисан за приказивање прилагођеног текста, приказује у прегледачу.
Директиве и делокруг АнгуларЈс-а
Опсег је дефинисан као лепак који веже контролер за приказ управљањем подацима између погледа и контролера.
Приликом креирања прилагођених АнгуларЈс директива, оне ће по дефаулту имати приступ објекту опсега у родитељском контролеру.
На тај начин прилагођеној директиви постаје лако да користи податке који се прослеђују главном контролеру.
Погледајмо пример како можемо да користимо опсег родитељског контролера у нашој прилагођеној директиви.
Event Registration Guru99 Global Event
Објашњење кода:
- Прво креирамо контролер назван „ДемоЦонтроллер“. У овом смо дефинисали променљиву која се зове туториалНаме и прикачили је објекту опсега у једној изјави - $ сцопе.туториалНаме = "АнгуларЈС".
- У нашој прилагођеној директиви променљиву можемо назвати „туториалНаме“ помоћу израза. Ова променљива би била доступна јер је дефинисана у контролеру „ДемоЦонтроллер“, који би постао родитељ за ову директиву.
- На контролер упућујемо у див ознаку, која ће деловати као наша надређена див ознака. Имајте на уму да ово прво треба урадити да би наша прилагођена директива приступила променљивој туториалНаме.
- Напокон само приложимо нашу прилагођену директиву „нг-гуру“ нашој див ознаци.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
- Горе наведени излаз јасно показује да наша прилагођена директива „нг-гуру“ користи променљиву опсега туториалНаме у родитељском контролеру.
Коришћење контролера са директивама
Ангулар даје могућност приступа променљивој члана контролера директно из прилагођених директива без потребе за опсегом.
То понекад постаје неопходно јер у апликацији можете имати више објеката опсега који припадају више контролера.
Дакле, постоји велика шанса да бисте могли погрешити приступом објекту опсега погрешног контролера.
У таквим сценаријима постоји начин да се из моје директиве изричито спомене изговор „Желим да приступим овом одређеном контролеру“.
Погледајмо пример како то можемо постићи.
Event Registration Guru99 Global Event
Објашњење кода:
- Прво креирамо контролер назван „ДемоЦонтроллер“. У овоме ћемо дефинисати променљиву која се назива „туториалНаме“ и овог пута ћемо је, уместо да је прикачимо на објекат опсега, директно прикључити на контролер.
- У нашој прилагођеној директиви посебно напомињемо да желимо да користимо регулатор „ДемоЦонтроллер“ користећи кључну реч параметар контролера.
- Стварамо референцу на контролер помоћу параметра "цонтроллерАс". Ово је дефинисао Ангулар и представља начин референцирања контролера као референце.
Напомена: - Могуће је приступити више контролора у директиви навођењем одговарајућих блокова контролера, контролора и израза предложака.
- Коначно, у нашем предлошку користимо референцу створену у кораку 3 и користећи променљиву члана која је била прикључена директно на контролер у кораку 1.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Излаз јасно показује да прилагођена директива посебно приступа ДемоЦонтроллеру и придруженој променљивој члана туториалНаме и приказује текст „Угаона“.
Како створити директиве за вишекратну употребу
Већ смо видели моћ прилагођених директива, али то можемо подићи на виши ниво изградњом сопствених директива за поновну употребу.
Рецимо, на пример, да смо желели да убризгамо код који ће увек приказивати доње ХТМЛ ознаке на више екрана, што је у основи само улаз за „Име“ и „старост“ корисника.
Да бисмо поново користили ову функцију на више екрана без кодирања сваки пут, креирамо главну контролу или директиву у углу да држимо ове контроле („Име“ и „старост“ корисника).
Дакле, сада, уместо да сваки пут уносимо исти код за доњи екран, можемо заправо да уградимо овај код у директиву и уградимо ту директиву у било ком тренутку.
Погледајмо пример како то можемо постићи.
Event Registration Guru99 Global Event
Објашњење кода:
- У нашем исечку кода за прилагођену директиву, мења се само вредност која се даје параметру предлошка наше прилагођене директиве.
Уместо ознаке или текста плана пет, ми заправо уносимо цео фрагмент од 2 контроле уноса за „Име“ и „старост“ који треба да буду приказани на нашој страници.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из горњег резултата можемо видети да се исечак кода из шаблона прилагођене директиве додаје на страницу.
АнгуларЈС директиве и компоненте - нг-трансцлуде
Као што смо већ раније поменули, Ангулар треба да прошири функционалност ХТМЛ-а. И већ смо видели како можемо извршити убризгавање кода помоћу прилагођених директива које се могу поново употребити.
Али у модерном развоју веб апликација постоји и концепт развоја веб компоненти. Што у основи значи стварање сопствених ХТМЛ ознака које се могу користити као компоненте у нашем коду.
Стога ангулар пружа још један ниво моћи проширивања ХТМЛ ознака давањем могућности убризгавања атрибута у саме ХТМЛ ознаке.
То се ради помоћу ознаке " нг-трансцлуде ", која је својеврсна поставка која угаоном каже да ухвати све што је стављено унутар директиве у маркуп.
Узмимо пример како то можемо постићи.
Event Registration Guru99 Global Event
Angular JS
Објашњење кода:
- Директиву користимо за дефинисање прилагођене ХТМЛ ознаке која се назива „окно“ и додавање функције која ће ставити неки прилагођени код за ову ознаку. У излазу ће наша прилагођена ознака окна приказати текст „АнгуларЈС“ у правоугаонику са масивном црном ивицом.
- Атрибут "трансцлуде" мора бити наведен као тачан, што је потребно да би ангулар убацио ову ознаку у наш ДОМ.
- У опсегу дефинишемо атрибут наслова. Атрибути се обично дефинишу као парови име / вредност, као што су: наме = "валуе". У нашем случају, име атрибута у нашем ХТМЛ тагу окна је „титле“. Симбол „@“ је захтев из угла. То се ради тако да се када се у 5. кораку изврши наслов реда = {{наслов}}, прилагођени код за атрибут наслова дода у ХТМЛ ознаку окна.
- Прилагођени код за насловне атрибуте који само црта чврсту црну границу за нашу контролу.
- Коначно, позивамо нашу прилагођену ХТМЛ ознаку заједно са атрибутом наслова који је дефинисан.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
- Излаз јасно показује да је атрибут наслова ознаке хтмл5 окна постављен на прилагођену вредност „Ангулар.ЈС“.
Угнездене директиве
Директиве у ангулар могу бити угнежђене. Као и само унутрашњи модули или функције у било ком програмском језику, можда ћете морати да уградите директиве једна у другу.
Ово можете боље разумети ако видите пример у наставку.
У овом примеру креирамо 2 директиве назване „спољна“ и „унутрашња“.
- Унутрашња директива приказује текст под називом „Унутрашњи“.
- Док спољна директива заправо позива унутрашњу директиву да прикаже текст под називом „Унутрашњи“.
Guru99 Global Event