ТАМОЖЕННЫЕ директивы в AngularJS: как создать? [Примеры]

Что такое пользовательская директива?

A Пользовательская директива в AngularJS — это определяемая пользователем директива, которая позволяет пользователям использовать нужные функции для расширения функциональности HTML. Его можно определить с помощью функции «директива», и он заменяет элемент, для которого используется. Несмотря на то, что 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>

Код Пояснение

Сначала мы создаем модуль для нашего углового приложения. Это необходимо для создания пользовательской директивы, поскольку директива будет создана с использованием этого модуля.
Сейчас мы создаем специальную директиву под названием «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.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.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Вывод ясно показывает, что пользовательская директива обращается к 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>

Код Пояснение

В нашем фрагменте кода для пользовательской директивы изменяется только значение, присвоенное параметру шаблона нашей пользовательской директивы. Вместо тега или текста пятого плана мы фактически вводим весь фрагмент из двух элементов управления вводом для « Имя» и «возраст», которые необходимо отобразить на нашей странице.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Из приведенного выше вывода мы видим, что на страницу добавляется фрагмент кода из шаблона пользовательской директивы.

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

Как мы упоминали ранее, Angular предназначен для расширения функциональности HTML. И мы уже видели, как можно внедрить код с помощью пользовательских директив многократного использования.

Но в современной разработке веб-приложений также существует концепция разработки веб-компонентов. По сути, это означает создание собственных HTML-тегов, которые можно использовать в качестве компонентов нашего кода.

Следовательно, angular обеспечивает еще один уровень возможностей расширения тегов HTML, предоставляя возможность вводить атрибуты в сами теги 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">
    <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. Атрибуты обычно определяются как пары имя/значение, например: name="value". В нашем случае имя атрибута в HTML-теге нашей панели — «title». Символ «@» — это требование angular. Это сделано для того, чтобы при выполнении строки title={{title}} на шаге 5 пользовательский код атрибута title добавлялся в HTML-тег панели.
Пользовательский код для атрибутов заголовка, который просто рисует сплошную черную рамку для нашего элемента управления.
Наконец, мы вызываем наш собственный HTML-тег вместе с определенным атрибутом title.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Вывод ясно показывает, что для атрибута title тега html5 панели установлено пользовательское значение «Angular.JS».

Вложенные директивы

Директивы в AngularJS могут быть вложенными. Как и просто внутренние модули или функции в любом язык программирования, вам может потребоваться встроить директивы друг в друга.

Вы можете лучше понять это, посмотрев пример ниже.

В этом примере мы создаем две директивы, называемые «внешняя» и «внутренняя».

Внутренняя директива отображает текст под названием «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», которая будет вести себя как наша родительская директива. Затем эта директива выполнит вызов «внутренней» директивы.
Ограничение: 'E' требуется angular, чтобы гарантировать, что данные из внутренней директивы доступны для внешней директивы. Буква «Е» — это краткая форма слова «Элемент».
Здесь мы создаем внутреннюю директиву, которая отображает текст «Inner» в теге div.
В шаблоне внешней директивы (шаг №4) мы вызываем внутреннюю директиву. Итак, здесь мы внедряем шаблон из внутренней директивы во внешнюю директиву.
Наконец, мы напрямую вызываем внешнюю директиву.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Из вывода,

Видно, что были вызваны как внешняя, так и внутренняя директивы, и отображается текст в обоих тегах div.

Обработка событий в директиве

Мероприятия такие щелчки мыши или нажатия кнопок могут обрабатываться внутри самих директив. Это делается с помощью функции ссылки. Функция link позволяет директиве прикрепляться к элементам DOM на HTML-странице.

Синтаксис:

Синтаксис элемента link показан ниже.

нг-повторить

link: function ($scope, element, attrs)

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

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Первоначально пользователю будет показан текст «Нажмите на меня», поскольку он изначально был определен в теге div. Когда вы на самом деле нажмете на тег div, будет показан приведенный ниже вывод.

Итого

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

Вы могли бы:

Что такое пользовательская директива?

Как создать пользовательскую директиву?

Код Пояснение

Директивы и области действия AngularJs

Код Пояснение

СТАТЬИ ПО ТЕМЕ

Использование контроллеров с директивами

Код Пояснение

Как создавать повторно используемые директивы

Код Пояснение

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

Код Пояснение

Вложенные директивы

Код Пояснение

Обработка событий в директиве

Код Пояснение

Итого