CUSTOM директиви в AngularJS: як створити? [Приклади]

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

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

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

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

Спеціальна директива в нашому випадку просто збирається ввести тег div із текстом «Посібник по 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: '<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 і є способом посилання на контролер як посилання.

Примітка: -У директиві можна отримати доступ до кількох контролерів, вказавши відповідні блоки контролера, controllerAs і оператори шаблону.

Нарешті, у нашому шаблоні ми використовуємо посилання, створене на кроці 3, і використовуємо змінну-член, яка була приєднана безпосередньо до контролера на кроці 1.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

Вихідні дані чітко показують, що користувальницька директива особливо звертається до 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: '&nbsp;&nbsp;Name <input type="text"><br><br>&nbsp;&nbsp;&nbsp;Age<input type="text">'
        };
    });

</script>

</body>
</html>

Пояснення коду

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

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

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

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

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

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

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

Це робить «ng-transclude” тег, який є свого роду параметром, щоб наказати 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.
В області ми визначаємо атрибут title. Атрибути зазвичай визначаються як пари ім’я/значення, наприклад: ім’я=”значення”. У нашому випадку ім’я атрибута в тегу HTML панелі – «title». Символ «@» є вимогою від Angular. Це робиться для того, щоб під час виконання рядка title={{title}} на кроці 5 настроюваний код атрибута title додавався до HTML-тегу панелі.
Спеціальний код для атрибутів заголовка, який просто малює суцільну чорну рамку для нашого контролю.
Нарешті, ми викликаємо наш власний тег HTML разом із визначеним атрибутом title.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

Вихідні дані чітко показують, що для атрибута title тегу html5 pane було встановлено спеціальне значення «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>

Пояснення коду

Ми створюємо директиву під назвою “outer”, яка буде працювати як наша батьківська директива. Потім ця директива звернеться до «внутрішньої» директиви.
Restrict:'E' необхідний angular, щоб гарантувати, що дані внутрішньої директиви доступні для зовнішньої директиви. Буква «E» є скороченою формою слова «Елемент».
Тут ми створюємо директиву inner, яка відображає текст «Inner» у тезі div.
У шаблоні для зовнішньої директиви (крок №4) ми викликаємо внутрішню директиву. Отже, тут ми впроваджуємо шаблон із внутрішньої директиви до зовнішньої директиви.
Нарешті, ми безпосередньо викликаємо зовнішню директиву.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З виходу,

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

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

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

Синтаксис:

Синтаксис елемента link наведено нижче

ng-повтор

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». Потім ми використовуємо функцію «bind» і говоримо, що ми хочемо додати спеціальні функції до події клацання елемента. Слово «клік» — це ключове слово, яке використовується для позначення події клацання будь-якого елемента керування HTML. Наприклад, елемент керування кнопка HTML має подію click. Оскільки в нашому прикладі ми хочемо додати спеціальний код до події клацання нашого тегу «dev», ми використовуємо ключове слово «click».
Тут ми говоримо, що хочемо замінити внутрішній HTML елемента (у нашому випадку елемента div) текстом «Ви натиснули на мене!».
Тут ми визначаємо наш тег div для використання спеціальної директиви ng-guru.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

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

Підсумки

Можна також створити спеціальну директиву, яку можна використовувати для введення коду в основну програму angular.
Спеціальні директиви можуть бути призначені для виклику членів, визначених в об’єкті області в певному контролері, за допомогою ключових слів «Controller», «controllerAs» і «template».
Директиви також можуть бути вкладеними, щоб забезпечити вбудовану функціональність, яка може знадобитися залежно від потреб програми.
Директиви можна також зробити придатними для повторного використання, щоб їх можна було використовувати для впровадження загального коду, який може знадобитися в різних веб-додатках.
Директиви також можна використовувати для створення власних тегів HTML, які матимуть власні функції, визначені відповідно до бізнес-вимог.
Події також можна обробляти всередині директив для обробки подій DOM, таких як натискання кнопок і миші.

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

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

Пояснення коду

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

Пояснення коду

СТАТТІ ПО ТЕМІ

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

Пояснення коду

Як створити повторно використовувані директиви

Пояснення коду

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

Пояснення коду

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

Пояснення коду

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

Пояснення коду

Підсумки

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