12) Angularjs ТАМОЖЕННАЯ Директива

Что такое таможенная директива?

Пользовательская директива в Angular Js — это пользовательская директива с желаемой функциональностью. Несмотря на то, что AngularJS имеет множество мощных директив из коробки, иногда требуются пользовательские директивы.

В этом уроке вы узнаете

Как создать пользовательскую директиву?
AngularJs Директивы и Области применения
Использование контроллеров с директивами
Как создавать многоразовые директивы
Директивы и компоненты AngularJS — ng-transclude
Вложенные директивы
Обработка событий в директиве

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

Давайте рассмотрим пример того, как мы можем создать собственную директиву.

Пользовательская директива в нашем случае просто вставляет тег div с текстом «AngularJS Tutorial» на нашей странице при вызове директивы.

<!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. Когда мы сделаем это, значение, которое мы определили для нашего шаблона «<div> Angular JS Tutorial </ div>», теперь будет введено здесь.

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

Вывод:

Приведенный выше вывод ясно показывает, что наша пользовательская директива ng-guru, для которой определен шаблон для отображения пользовательского текста, отображается в браузере.

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 и является способом ссылки на контроллер в качестве ссылки.
Примечание: — Можно получить доступ к нескольким контроллерам в директиве, указав соответствующие блоки контроллера, controllerAs и операторы шаблона.
Наконец, в нашем шаблоне мы используем ссылку, созданную на шаге 3, и переменную-член, которая была присоединена непосредственно к контроллеру на шаге 1.

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

Вывод:

Вывод ясно показывает, что пользовательская директива особенно обращается к DemoController и переменной-члену tutorialName, прикрепленной к нему, и отображает текст «Angular».

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

Мы уже видели силу пользовательских директив, но мы можем поднять это на следующий уровень, создав собственные директивы многократного использования.

Скажем, например, что мы хотели внедрить код, который бы всегда отображал теги HTML ниже на нескольких экранах, что в основном является просто вводом для «имени» и «возраста» пользователя.

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

Так что теперь вместо того, чтобы каждый раз вводить один и тот же код для приведенного ниже экрана, мы можем фактически встроить этот код в директиву и встраивать эту директиву в любой момент времени.

Давайте посмотрим пример того, как мы можем достичь этого.

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

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

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

Вывод:

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

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

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

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

В этом примере мы создаем 2 директивы, которые называются «external» и «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>

Объяснение кода:

Мы создаем директиву под названием «external», которая будет вести себя как наша родительская директива. Эта директива затем вызовет «внутреннюю» директиву.
Ограничение: «E» требуется angular для обеспечения доступности данных из внутренней директивы для внешней директивы. Буква «Е» является краткой формой слова «Элемент».
Здесь мы создаем внутреннюю директиву, которая отображает текст «Inner» в теге div.
В шаблоне для внешней директивы (шаг # 4) мы вызываем внутреннюю директиву. Итак, здесь мы вводим шаблон из внутренней директивы во внешнюю директиву.
Наконец, мы напрямую вызываем внешнюю директиву.

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

Вывод:

Из вывода

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

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

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

Объяснение кода:

Мы используем функцию link, как определено в angular, чтобы дать возможность директивам получать доступ к событиям в HTML DOM.
Мы используем ключевое слово «element», потому что мы хотим ответить на событие для элемента HTML DOM, который в нашем случае будет элементом «div». Затем мы используем функцию «bind» и говорим, что хотим добавить пользовательские функции к событию click элемента. Слово «click» — это ключевое слово, которое используется для обозначения события click любого элемента управления HTML. Например, элемент управления кнопки HTML имеет событие click. Поскольку в нашем примере мы хотим добавить собственный код в событие click нашего тега «dev», мы используем ключевое слово «click».
Здесь мы говорим, что мы хотим заменить внутренний HTML элемента (в нашем случае элемент div) текстом «Вы щелкнули меня!».
Здесь мы определяем наш тег div для использования пользовательской директивы ng-guru.

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

Вывод:

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

Резюме

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

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

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

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

12) Angularjs ТАМОЖЕННАЯ Директива

Что такое таможенная директива?

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

AngularJs Директивы и Области применения

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

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

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности