Як штучний інтелект може допомогти у тестуванні користувацької директиви?

Асистенти ШІ генерують скелети модульних тестів, які компілюють директиву, додають область видимості та стверджують (assert) на відрендереному виході. Вони добре вміють перераховувати граничні випадки, тому розглядайте згенеровані твердження як початковий чернетку.

Користувацька директива AngularJS: шаблони, область дії та включення

⚡ Розумний підсумок

Користувацькі директиви в AngularJS розширюють HTML за допомогою поведінки, яку ви визначаєте самостійно, і яку можна повторно використовувати. Фабрика директив повертає об'єкт визначення, і AngularJS додає цю поведінку скрізь, де в розмітці з'являється відповідний елемент, атрибут, клас або коментар.

🏗️ Реєстрація: Метод module.directive приймає нормалізовану назву плюс фабричну функцію, яка повертає об'єкт визначення директиви.
🔤 Найменування: Імена всередині camelCase JavaСкрипт та kebab-case всередині HTML, тож ngGuru написано як ng-guru на сторінці.
🎯 Відповідність: Властивість restrict визначає, чи AngularJS відповідає елементу, атрибуту, класу чи коментарю, і за замовчуванням вона має значення EA.
🧬 Доступ до області застосування: Директива за замовчуванням використовує батьківську область видимості, тоді як опція scope створює ізолят-область видимості за допомогою прив'язок @, =, & або <.
🔗 Функція посилання: Функція link отримує область видимості, елемент та атрибути, і це правильне місце для DOM-слухачів та очищення.
🧱 Склад: Директиви вкладаються одна в одну, обгортають довільну розмітку шляхом трансклюзії та надають API братам і сестрам через контролер.
⚠️ Статус підтримки: Життєвий цикл AngularJS завершився 31 грудня 2021 року і не отримає жодних подальших патчів чи виправлень безпеки.

Детальніше

Що таке користувацька директива в AngularJS?

A Спеціальна директива В AngularJS це директива, визначена користувачем, яка розширює HTML поведінкою, яку ви пишете самостійно. Вона зареєстрована на Модулі використовуючи функцію «директива», і AngularJS прикріплює її скрізь, де на сторінці з’являється відповідний елемент або атрибут. Навіть попри те, що AngularJS має багато потужних вбудовані директиви з коробки, наприклад ng-повтор, іноді потрібні спеціальні директиви.

⚠️ виправлення: В оригіналі було сказано, що спеціальна директива «замінює елемент, для якого вона використовується». За замовчуванням вона не: template вставлено всередині узгоджений елемент. Потреби в заміні replace: true, застарілий з AngularJS 1.3.

⚠️ Повідомлення служби підтримки: Досягнуто AngularJS кінець терміну служби 31 грудня 2021 року і не отримує жодних подальших виправлень чи виправлень безпеки. Все, що наведено нижче, залишається точним для підтримки існуючого коду AngularJS 1.x; у сучасному Angular еквівалентами є компоненти та директиви атрибутів.

Причиною використання власної директиви є повторення. Коли та сама розмітка або схема DOM з'являється на кількох екранах, директива перетворює її на один іменований тег.

Як створити спеціальну директиву?

Давайте розглянемо приклад того, як ми можемо створити власну директиву AngularJS.

У нашому випадку користувацька директива просто вставлятиме на нашу сторінку тег div з текстом «Посібник з Angular JS», коли вона викликається.

На скріншоті з анотаціями нижче пронумеровано чотири частини списку, пояснення яких наведено після нього.

<!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>

⚠️ Увага — у цьому списку збережено дефекти: Код відтворено точно так, як опубліковано. Три недоліки повторюються в кожному списку тут: chrset="UTF 8" повинно бути charset="UTF-8"; angular.js та angular.min.js обидва завантажуються, тому AngularJS завантажується двічі; та angular-route.js завантажується перед файлом, від якого залежить.

Code Пояснення

Спочатку ми створюємо a Модулі для нашої програми AngularJS. Це необхідно для створення власної директиви, оскільки директива буде створена за допомогою цього модуля.
Зараз ми створюємо власну директиву під назвою «ngGuru«та визначення фабричної функції, яка зберігатиме користувацький код для нашої директиви.
Ми використовуємо параметр шаблону, який є параметром, визначеним AngularJS для користувацьких директив. Тут ми визначаємо, що щоразу, коли використовується ця директива, просто використовується значення шаблону та вставляється його у викликальний код.
Тут ми використовуємо нашу спеціально створену директиву «ng-guru». Коли ми це робимо, значення, яке ми визначили для нашого шаблону, <div>Angular JS Tutorial</div>, тепер буде введено сюди.

Найменування директив та нормалізація

Невідповідність імен між JavaСкрипт та HTML бентежать більшість новачків. AngularJS нормалізує кожен елемент та ім'я атрибута перед зіставленням: це видаляє будь-які x- or data- префікс, а потім перетворює ім'я, розділене -, : or _ у camelCase. Ось чому ngGuru сірники ng-guru, і чому data-ng-guru теж працює. Справжня назва — camelCase; kebab-case — це просто те, як це написано в HTML.

⚠️ виправлення: У вихідному тексті було зазначено, що назва користувацької директиви «повинна починатися з літер 'ng'». офіційна документація AngularJS радить протилежне: ніколи не ставте перед власними директивами префікс ng, або вони можуть конфліктувати з майбутнім вбудованим префіксом. Використовуйте власний префікс, наприклад g99Guru записано як g99-guru.

Якщо код виконано успішно, з'явиться цей вивід.

вихід:

Вивід чітко показує, що наша власна директива ng-guru, в якій визначено шаблон для відображення власного тексту, відображається у браузері. Наступний крок – помістити щось варте повторного використання всередину цього шаблону.

Як створювати директиви багаторазового використання

Ми вже побачили силу користувацьких директив, але ми можемо вивести це на наступний рівень, створивши власні директиви для повторного використання.

Припустимо, наприклад, що ми хочемо вставити код, який завжди відображатиме наведені нижче HTML-теги на кількох екранах, що по суті є просто введенням полів «Ім’я» та «Вік» користувача.

Щоб повторно використовувати цей фрагмент на кількох екранах, не кодуючи його щоразу, ми створюємо головний елемент керування або директиву в 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">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('ngGuru',function(){
        return {

            template: '&nbsp;&nbsp;Name <input type="text"><br><br>&nbsp;&nbsp;&nbsp;Age<input type="text">'
        };
    });

</script>

</body>
</html>

Code Пояснення

У нашому фрагменті коду для користувацької директиви змінюється лише значення, яке надається параметру шаблону. Замість простого тегу чи рядка тексту ми вводимо весь фрагмент із двох елементів керування введенням для полів «Ім’я» та «Вік», які потрібно відобразити на нашій сторінці.

💡 Порада: Шаблон такої довжини має бути в окремому файлі. Поміняти місцями template та цінності templateUrl: 'name-age.html'.

Якщо код виконано успішно, з'явиться цей вивід.

вихід:

З наведеного вище виводу ми бачимо, що фрагмент коду з шаблону користувацької директиви додається на сторінку. Шаблон все ще статичний, тому наступним кроком є передача йому даних.

Директиви та області дії AngularJS

Команда сфера визначається як клей, який пов'язує контролер з представленням, керуючи даними між представленням та контролером.

Під час створення власних директив AngularJS вони за замовчуванням матимуть доступ до об'єкта scope у батьківському контролері. Це той самий об'єкт scope, а не його копія.

Таким чином, користувальницькій директиві стає легко використовувати дані, що передаються головному контролеру.

Давайте розглянемо приклад того, як ми можемо використовувати область видимості батьківського контролера в нашій користувацькій директиві. На скріншоті нижче показано чотири кроки.

<!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>

Code Пояснення

Спочатку ми створюємо контролер під назвою «DemoController». У ньому ми визначаємо змінну під назвою tutorialName та приєднуємо її до об’єкта scope одним оператором: $scope.tutorialName = "Angular JS".
У нашій спеціальній директиві ми можемо викликати змінну «tutorialName» за допомогою виразу. Ця змінна буде доступною, оскільки вона визначена в контролері “DemoController”, який стане батьківським для цієї директиви.
Ми посилаємося на контролер у тегу div, який виступатиме як наш батьківський тег div. Зауважте, що це потрібно зробити спочатку, щоб наша спеціальна директива мала доступ до змінної tutorialName.
Нарешті ми просто прикріплюємо нашу спеціальну директиву «ng-guru» до нашого тегу div.

Якщо код виконано успішно, з'явиться цей вивід.

вихід:

Наведений вище вивід чітко показує, що наша власна директива «ng-guru» використовує змінну області видимості tutorialName у батьківському контролері. Спільне використання батьківської області видимості зручне, але не завжди те, що вам потрібно.

Використання контролерів із директивами

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-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>

Code Пояснення

Спочатку ми створюємо контролер під назвою «DemoController». У ньому ми визначимо змінну під назвою «tutorialName» і цього разу замість того, щоб приєднувати її до об'єкта області видимості, ми приєднаємо її безпосередньо до контролера.
У нашій спеціальній директиві ми спеціально зазначаємо, що хочемо використовувати контролер «DemoController» за допомогою ключового слова параметра контролера.
Ми створюємо посилання на контролер за допомогою параметра «controllerAs». Це визначено в AngularJS і є способом посилання на контролер за допомогою псевдоніма.
Нарешті, у нашому шаблоні ми використовуємо посилання, створене на кроці 3, та змінну-член, яка була безпосередньо приєднана до контролера на кроці 1.

Примітка: Доступ до кількох контролерів можна отримати в одній директиві, вказавши відповідні блоки контролера, controllerAs та шаблонних операторів. Щоб досягти батько замість цього використовуйте контролер директиви require.

Якщо код виконано успішно, з'явиться цей вивід.

вихід:

Вивід чітко показує, що користувацька директива звертається до DemoController та приєднаної до нього змінної-члена tutorialName, а також відображає текст «Angular». Обидва підходи все ще зчитують зі спільної області видимості, чому запобігає ізольована область видимості.

Чим відрізняються прив'язки @, =, & та < в області видимості Isolate

Директива, яка має спільну батьківську область видимості, може бути використана лише один раз для кожного контролера, оскільки дві копії боротимуться за ті самі змінні. scope об'єкт створює ізолювати область видимості: директива не бачить нічого зовні, окрім перелічених вами властивостей. Кожен запис використовує префікс, який вказує, як передається його значення.

Symbol	Керівництво	Отримана вартість	Використовуйте для
@	Односторонній в'їзд	Атрибут як інтерпольований рядок	Мітки, заголовки, будь-який звичайний текст
=	Двосторонній	Сам живий об'єкт або значення	Моделі, до яких директива записує дані
&	Зовнішній дзвінок	Функція, що обчислює вираз у зовнішній області видимості	Зворотні виклики, такі як при закритті або при збереженні
<	Односторонній в'їзд	Оцінене значення, ніколи не записується вгору	Дані лише для читання, додано в AngularJS 1.5

💡 Порада: Досягнути < перед тим =Одностороннє зв'язування дешевше для спостереження та запобігає непомітній зміні даних викликаючої сторони компонентом. У наступному розділі використовується @.

Директиви та компоненти AngularJS: ng-transclude

Як ми вже згадували раніше, AngularJS призначений для розширення функціональності HTML. І ми вже бачили, як ми можемо впроваджувати код за допомогою спеціальних повторно використовуваних директив.

Але в сучасній розробці веб-додатків також існує концепція розробкиping веб-компоненти, що по суті означає створення власних HTML-тегів, які можна використовувати як компоненти в нашому коді.

Отже, AngularJS надає ще один рівень можливостей для розширення тегів HTML, надаючи можливість поміщати будь-яку розмітку, яку викликає функція, всередині тегу.

Це робить «ng-transclude” директива, яка вказує 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">
    <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>

Code Пояснення

Ми використовуємо директиву для визначення власного HTML-тегу під назвою «pane» з фабричною функцією, що надає його код. У виході тег pane відображає текст «Angular JS» у прямокутнику із суцільною чорною рамкою.
Властивість «transclude» має бути встановлена на значення true, що вказує AngularJS зберегти оригінальну внутрішню розмітку та зробити її доступною для ng-transclude.
У об'єкті scope ми оголошуємо прив'язку заголовка. Атрибути зазвичай записуються як пари ім'я/значення, наприклад name="value"У нашому випадку атрибутом тегу панелі є «title», а символ «@» просить AngularJS скопіювати цей атрибут як інтерпольований рядок.
Шаблон малює суцільну чорну рамку для нашого елемента керування та позначає місце, куди вставляється трансклюзована розмітка.
Нарешті, ми викликаємо наш користувацький тег HTML разом з атрибутом title, який був визначений.

⚠️ виправлення: В оригінальному тексті «@» було описано як «вимога від Angular». Це не формальність: @ є одним із чотирьох символів зв'язування isolate-scope у таблиці вище та завжди повертає рядок. Цей шаблон також ніколи не відображається {{title}}, і жоден контролер не визначає title, тому видно лише транскрибований текст.

Якщо код виконано успішно, з'явиться цей вивід.

вихід:

Вивід показує елемент користувацької панелі, відображений як облямований прямокутник, що містить включений текст «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>

⚠️ Увага — дефект збережено в цьому списку: Опублікований список починається з </head>, пропускаючи його відкриття <!DOCTYPE html>, <html> та <head> рядки. Додайте їх перед запуском.

Code Пояснення

Ми створюємо директиву під назвою “outer”, яка буде працювати як наша батьківська директива. Потім ця директива звернеться до «внутрішньої» директиви.
Команда restrict:'E' параметр вказує AngularJS зіставляти кожну директиву за елемент ім'я, тому їх можна записати як теги <outer> та <inner>Літера «Е» — це скорочена форма слова «Елемент».
Тут ми створюємо директиву inner, яка відображає текст «Inner» у тезі div.
У шаблоні для зовнішньої директиви ми викликаємо внутрішню директиву. Отже, тут ми вставляємо шаблон з внутрішньої директиви у зовнішню директиву.
Нарешті, ми безпосередньо викликаємо зовнішню директиву.

⚠️ виправлення: Оригінальний текст заявлений restrict:'E' потрібно «для забезпечення доступності даних із внутрішньої директиви для зовнішньої директиви». Він нічого такого не робить; він лише контролює як можна написати директиву. Вкладеність працює, оскільки компілятор постійно переходить до шаблону, який він щойно вставив. Щоб поділитися даними, використовуйте require та controller.

Якщо код виконано успішно, з'явиться цей вивід.

вихід:

З виходу,

Видно, що викликано як зовнішню, так і внутрішню директиви, і відображається текст в обох тегах div.

Рендеринг розмітки — це лише половина того, що робить директива; інша половина — це реагування на користувача.

Обробка подій у директиві

Події Такі дії, як клацання мишею або натискання кнопок, можна обробляти з самих директив. Це робиться за допомогою функції link. Функція link дозволяє директиві приєднуватися до елементів DOM на HTML-сторінці.

Синтаксис:

Синтаксис функції посилання показано нижче.

link: function ($scope, element, attrs)

Функція link зазвичай приймає 3 параметри: область дії, елемент, з яким пов'язана директива, та атрибути цільового елемента. Ще два, обов'язковий контролер та функція transclude, надходять під час їх застосування.

Фаза компіляції проти фази компонування

AngularJS обробляє директиву за два проходи, і знання того, яка з них яка, вказує на місце вашого коду.

Компіляція виконується один раз на елементі шаблону, до появи будь-якої області видимості. Це підходить для структурних редагувань, що використовуються кожним клоном.
посилання виконується один раз для кожного екземпляра, після клонування шаблону та додавання області видимості. Слухачі DOM та зчитування області видимості належать сюди.

Оскільки компіляція не має області видимості, все, що потребує даних, належить до посилання, тому наведений нижче приклад визначає link поодинці

Давайте розглянемо приклад того, як ми можемо цього досягти. На скріншоті нижче пронумеровано чотири пункти.

<!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>

Code Пояснення

Ми використовуємо функцію link, як визначено в AngularJS, щоб надати директиві можливість доступу до подій у HTML DOM.
Ми використовуємо ключове слово «element», оскільки хочемо реагувати на подію для елемента HTML DOM, яким у нашому випадку є елемент «div». Потім ми використовуємо функцію «bind», щоб додати користувацьку функціональність до події кліку елемента. Слово «click» – це ключове слово, яке використовується для позначення події кліку будь-якого елемента керування HTML.
Тут ми кажемо, що хочемо замінити внутрішній HTML-код елемента, у нашому випадку елемента div, текстом «Ви натиснули на мене».
Тут ми визначаємо наш тег div для використання спеціальної директиви ng-guru.

💡 Порада: Директива повинна прибирати за собою. Видаліть будь-який слухач, який переживає елемент всередині. element.on('$destroy', ...), або сторінка має витік пам'яті.

Якщо код виконано успішно, з'явиться цей вивід.

вихід:

Спочатку користувачеві відображається текст «Click Me», оскільки саме він був визначений всередині тегу div. Коли ви натискаєте на тег div, замість нього відображається результат нижче.

У кожному наведеному вище прикладі використовувалася одна або дві властивості одного й того ж об'єкта визначення. Повний набір варто зберегти.ping під рукою.

Довідка про властивості об'єкта визначення директиви

Об'єкт, що повертається фабрикою директив, це Об'єкт визначення директивиКожна властивість відповідає на одне питання про те, як поводиться директива.

властивість	дефолт	Що вона робить
обмежити	«ЕА»	Які форми відповідають: елементу E, атрибуту A, класу C, коментарю M
шаблон	ніхто	Вбудована розмітка, вставлена у збіг елемента
шаблонUrl	ніхто	Шлях до файлу шаблону, отриманий один раз, а потім кешований
сфера	false	false надає спільний доступ батьківському об'єкту, true створює дочірній об'єкт, об'єкт ізолює
контролер	ніхто	Конструктор, що надає доступ до API, може вимагати від інших директив
контролерAs	ніхто	Псевдонім для контролера всередині шаблону
вимагати	ніхто	Контролер іншої директиви для вставки; ^ шукає батьківські елементи, ^^ пропускає себе, ? необов'язково
за посиланням	ніхто	Функція для кожного екземпляра: область видимості, елемент, атрибути, контролер, transcludeFn
скласти	ніхто	Виконується один раз у шаблоні до появи будь-якої області видимості
виключити	false	Зберігає оригінальну внутрішню розмітку для ng-transclude
пріоритет	0	Порядок компіляції для спільного елемента; вищий виконується першим
термінал	false	Зупиняє директиви з нижчим пріоритетом для цього елемента
замінювати	false	Міняє елемент на шаблон. Застаріло з версії 1.3.

💡 Порада: Починати з restrict, template та link. Додайте scope для повторного використання, controller та require для викликів від директиви до директиви та залиште priority та terminal поодинці

Поширені запитання

Компонент, доданий в AngularJS 1.5, — це директива з упередженими значеннями за замовчуванням: зіставлення лише елементів, ізоляційна область видимості та контролер. Використовуйте компонент для автономного представлення та директиву, коли вам потрібен доступ до DOM на рівні посилань.

Зазвичай ім'я не було нормалізовано належним чином, або restrict виключає використану вами форму. Директива, зареєстрована як myBox збігається з my-box, а не з mybox, а тег елемента має бути обмежений, щоб включати E.

Так. AI Помічники відображають ізолятну область видимості на декоратори вводу та виводу, а шаблон — на шаблон компонента. Revпереглядати DOM-код для трансклюзії та функції посилання вручну, оскільки вони рідко перекладаються коректно.

Асистенти штучного інтелекту генерують одиничне випробування скелети, які компілюють директиву, додають область видимості та стверджують (assert) на відрендереному виводі. Вони добре справляються з переліком граничних випадків, тому розглядайте згенеровані твердження як початковий чернетку.

Використовуйте templateUrl, коли розмітка перевищує один або два рядки. Файл можна редагувати звичайними інструментами HTML, він отримується лише один раз, а потім обробляється з кешу шаблону для кожного наступного екземпляра.

Користувацька директива AngularJS: шаблони, область дії та включення

Що таке користувацька директива в AngularJS?

Як створити спеціальну директиву?

Code Пояснення

Найменування директив та нормалізація

Як створювати директиви багаторазового використання

Code Пояснення

Директиви та області дії AngularJS

Code Пояснення

Використання контролерів із директивами

Code Пояснення

Чим відрізняються прив'язки @, =, & та < в області видимості Isolate

Директиви та компоненти AngularJS: ng-transclude

Code Пояснення

Вкладені директиви

Code Пояснення

Обробка подій у директиві

Фаза компіляції проти фази компонування

Code Пояснення

Довідка про властивості об'єкта визначення директиви

Поширені запитання

Підсумуйте цей пост за допомогою:

Підпишіться на розсилку