Що таке митна директива?
Спеціальна директива в Angular Js - це визначена користувачем директива з вашим бажаним функціоналом. Навіть незважаючи на те, що AngularJS має безліч потужних директив, котрі-небудь потрібні спеціальні директиви.
У цьому підручнику ви дізнаєтесь-
- Як створити власну директиву?
- Директиви та сфери застосування AngularJs
- Використання контролерів з директивами
- Як створити директиви багаторазового використання
- Директиви та компоненти AngularJS - ng-transclude
- Вкладені директиви
- Обробка подій у директиві
Як створити власну директиву?
Давайте розглянемо приклад того, як ми можемо створити власну директиву.
Спеціальна директива в нашому випадку просто вводить тег div, який має текст "Підручник з AngularJS" на нашій сторінці при виклику директиви.
Event Registration Guru99 Global Event
Пояснення коду:
- Спочатку ми створюємо модуль для нашого кутового додатка. Це потрібно для створення користувацької директиви, оскільки директива буде створена за допомогою цього модуля.
- Зараз ми створюємо власну директиву під назвою "ngGuru" та визначаємо функцію, яка матиме спеціальний код для нашої директиви.
Примітка:-
Зверніть увагу, що, визначаючи директиву, ми визначили її як ngGuru з літерою "G" як велику. І коли ми отримуємо доступ до нього з нашого тегу div як директиву, ми отримуємо доступ до нього як ng-guru. Ось як angular розуміє власні директиви, визначені в додатку. По-перше, назва користувацької директиви повинна починатися з букв 'ng'. По-друге, дефіс "-" слід згадувати лише під час виклику директиви. І, по-третє, перша буква, що стоїть після букв 'ng', при визначенні директиви може бути або нижньою, або великою.
- Ми використовуємо параметр шаблону, який є параметром, визначеним Angular для користувацьких директив. У цьому ми визначаємо, що всякий раз, коли використовується ця директива, просто використовуйте значення шаблону та вводьте його у викличний код.
- Зараз ми використовуємо нашу створену на замовлення директиву "нг-гуру". Коли ми це зробимо, сюди буде введено значення, яке ми визначили для нашого шаблону "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 надає можливість доступу до змінної-члена контролера безпосередньо з користувацьких директив без необхідності об'єкта scope.
Це часом стає необхідним, оскільки в додатку у вас може бути кілька об’єктів сфери, що належать до декількох контролерів.
Отже, існує велика ймовірність того, що ви можете помилитися, отримавши доступ до об’єкта сфери неправильного контролера.
У таких сценаріях є спосіб спеціально згадати вимову "Я хочу отримати доступ до цього конкретного контролера" з моєї директиви.
Давайте розглянемо приклад того, як ми можемо цього досягти.
Event Registration Guru99 Global Event
Пояснення коду:
- Спочатку ми створюємо контролер під назвою "DemoController". У цьому розділі ми визначимо змінну, яка називається "tutorialName", і цього разу замість того, щоб приєднувати її до об'єкта сфери, ми приєднаємо її безпосередньо до контролера.
- У нашій користувацькій директиві ми спеціально згадуємо, що ми хочемо використовувати контролер "DemoController", використовуючи ключове слово параметра контролера.
- Ми створюємо посилання на контролер, використовуючи параметр "controllerAs". Це визначається Angular і є способом посилання на контролер як посилання.
Примітка: - У директиві можна отримати доступ до декількох контролерів, вказавши відповідні блоки контролера, контролерів та операторів шаблону.
- Нарешті, у нашому шаблоні ми використовуємо посилання, створене на кроці 3, і використовуємо змінну-член, яка була приєднана безпосередньо до контролера на кроці 1.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
Вихідні дані чітко показують, що користувацька директива особливо звертається до DemoController та приєднаної до нього змінної члена tutorialName і відображає текст "Angular".
Як створити директиви багаторазового використання
Ми вже бачили силу користувальницьких директив, але ми можемо підняти це на наступний рівень, побудувавши власні повторно використовувані директиви.
Скажімо, наприклад, що ми хотіли ввести код, який завжди відображатиме наведені нижче теги HTML на декількох екранах, що в основному є лише вхідними даними для "Імені" та "віку" користувача.
Щоб повторно використовувати цю функцію на кількох екранах, не кодуючи кожного разу, ми створюємо головний елемент керування або директиву в angular для утримання цих елементів керування ("Ім'я" та "вік" користувача).
Отже, замість того, щоб кожного разу вводити той самий код для екрана нижче, ми можемо фактично вбудувати цей код у директиву та вставляти цю директиву в будь-який момент часу.
Давайте побачимо приклад того, як ми можемо цього досягти.
Event Registration Guru99 Global Event
Пояснення коду:
- У нашому фрагменті коду для користувацької директиви змінюється лише значення, яке надається параметру шаблону нашої користувацької директиви.
Замість тегу або тексту з п’яти планів ми фактично вводимо весь фрагмент з 2 елементів керування введенням для "Ім'я" та "вік", які потрібно відображати на нашій сторінці.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
З наведеного вище результату ми бачимо, що фрагмент коду із шаблону користувацької директиви додається на сторінку.
Директиви та компоненти AngularJS - ng-transclude
Як ми вже згадували раніше, Angular призначений для розширення функціональних можливостей HTML. І ми вже бачили, як ми можемо вводити код за допомогою користувальницьких повторно використовуваних директив.
Але в сучасній розробці веб-додатків існує також концепція розробки веб-компонентів. Що в основному означає створення власних тегів HTML, які можна використовувати як компоненти нашого коду.
Отже, angular забезпечує інший рівень потужності для розширення тегів HTML, надаючи можливість вводити атрибути в самі теги HTML.
Це робиться за допомогою тегу " ng-transclude ", який є своєрідним параметром, який повідомляє angular, щоб захопив усе, що розміщено всередині директиви у розмітці.
Візьмемо приклад того, як ми можемо цього досягти.
Event Registration Guru99 Global Event
Angular JS
Пояснення коду:
- Ми використовуємо директиву для визначення користувацького тегу HTML під назвою 'pane' та додавання функції, яка додасть певний власний код для цього тегу. На виході наш спеціальний тег панелі відображатиме текст "AngularJS" у прямокутнику із суцільною чорною рамкою.
- Атрибут "transclude" повинен бути зазначений як істинний, що потрібно angular для введення цього тегу в наш DOM.
- В обсязі ми визначаємо атрибут title. Атрибути зазвичай визначаються як пари ім'я / значення, наприклад: name = "value". У нашому випадку ім’я атрибута в тезі HTML на панелі - „title”. Символ "@" - це вимога від angular. Це робиться для того, щоб при виконанні рядка title = {{title}} на кроці 5 власний код атрибута title додавався до HTML-тегу панелі.
- Спеціальний код для атрибутів заголовка, який просто малює суцільну чорну межу для нашого контролю.
- Нарешті, ми викликаємо наш власний тег HTML разом із визначеним атрибутом title.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
- Вихідні дані чітко показують, що для атрибута title тегу html5 на панелі встановлено спеціальне значення "Angular.JS".
Вкладені директиви
Директиви в angular можуть бути вкладеними. Як і лише внутрішні модулі або функції будь-якої мови програмування, можливо, вам доведеться вставляти директиви один в одного.
Ви можете краще зрозуміти це, побачивши наведений нижче приклад.
У цьому прикладі ми створюємо 2 директиви, що називаються "зовнішня" та "внутрішня".
- Внутрішня директива відображає текст під назвою "Inner".
- Хоча зовнішня директива фактично викликає внутрішню директиву для відображення тексту під назвою "Inner".
Guru99 Global Event