Что такое особая директива?
Пользовательская директива в Angular Js - это определяемая пользователем директива с желаемой функциональностью. Несмотря на то, что AngularJS имеет множество мощных директив из коробки, иногда требуются специальные директивы.
В этом руководстве вы узнаете:
- Как создать специальную директиву?
- Директивы и области действия AngularJs
- Использование контроллеров с директивами
- Как создавать многоразовые директивы
- Директивы и компоненты AngularJS - ng-transclude
- Вложенные директивы
- Обработка событий в директиве
Как создать специальную директиву?
Давайте посмотрим на пример того, как мы можем создать настраиваемую директиву.
Пользовательская директива в нашем случае просто вставляет тег div, который имеет текст «AngularJS Tutorial» на нашей странице при вызове директивы.
Event Registration Guru99 Global Event
Пояснение к коду:
- Сначала мы создаем модуль для нашего приложения angular. Это необходимо для создания настраиваемой директивы, поскольку директива будет создана с использованием этого модуля.
- Сейчас мы создаем настраиваемую директиву под названием «ngGuru» и определяем функцию, которая будет иметь специальный код для нашей директивы.
Примечание:-
Обратите внимание, что при определении директивы мы определили ее как ngGuru с заглавной буквой G. И когда мы обращаемся к нему из нашего тега div в качестве директивы, мы получаем доступ к нему как к ng-guru. Вот как angular понимает пользовательские директивы, определенные в приложении. Во-первых, имя настраиваемой директивы должно начинаться с букв «нг». Во-вторых, дефис "-" следует упоминать только при вызове директивы. И, в-третьих, первая буква, следующая за буквами «ng» при определении директивы, может быть либо строчной, либо прописной.
- Мы используем параметр шаблона, который является параметром, определенным Angular для пользовательских директив. В этом мы определяем, что всякий раз, когда используется эта директива, просто используйте значение шаблона и вставляйте его в вызывающий код.
- Здесь мы теперь используем нашу специально созданную директиву «ng-guru». Когда мы это сделаем, здесь будет вставлено значение, которое мы определили для нашего шаблона «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 предоставляет возможность доступа к переменной-члену контроллера напрямую из настраиваемых директив без необходимости в объекте области действия.
Иногда это становится необходимым, потому что в приложении может быть несколько объектов области, принадлежащих нескольким контроллерам.
Таким образом, высока вероятность того, что вы могли совершить ошибку, получив доступ к объекту области видимости не того контроллера.
В таком сценарии есть способ конкретно упомянуть в моей директиве «Я хочу получить доступ к этому конкретному контроллеру».
Давайте посмотрим на пример того, как мы можем этого добиться.
Event Registration Guru99 Global Event
Пояснение к коду:
- Сначала мы создаем контроллер под названием «DemoController». Здесь мы определим переменную с именем «tutorialName», и на этот раз вместо того, чтобы прикреплять ее к объекту области видимости, мы присоединим ее непосредственно к контроллеру.
- В нашей настраиваемой директиве мы специально упоминаем, что хотим использовать контроллер «DemoController» с помощью ключевого слова параметра контроллера.
- Мы создаем ссылку на контроллер с помощью параметра controllerAs. Это определяется Angular и позволяет ссылаться на контроллер как на ссылку.
Примечание: - В директиве можно получить доступ к нескольким контроллерам, указав соответствующие блоки контроллера, controllerAs и операторов шаблона.
- Наконец, в нашем шаблоне мы используем ссылку, созданную на шаге 3, и используем переменную-член, которая была прикреплена непосредственно к контроллеру на шаге 1.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
Выходные данные ясно показывают, что настраиваемая директива особенно обращается к DemoController и присоединенной к нему переменной-члену tutorialName и отображает текст «Angular».
Как создавать многоразовые директивы
Мы уже видели мощь настраиваемых директив, но мы можем вывести их на новый уровень, создав наши собственные повторно используемые директивы.
Предположим, например, что мы хотели внедрить код, который всегда отображал бы указанные ниже теги HTML на нескольких экранах, что, по сути, является просто вводом для «имени» и «возраста» пользователя.
Чтобы повторно использовать эту функцию на нескольких экранах без кодирования каждый раз, мы создаем главный элемент управления или директиву в angular для хранения этих элементов управления («Имя» и «возраст» пользователя).
Итак, теперь вместо того, чтобы каждый раз вводить один и тот же код для показанного ниже экрана, мы можем фактически встроить этот код в директиву и встраивать эту директиву в любой момент времени.
Давайте посмотрим на примере, как мы можем этого добиться.
Event Registration Guru99 Global Event
Пояснение к коду:
- В нашем фрагменте кода для настраиваемой директивы изменяется только значение, которое присваивается параметру шаблона нашей настраиваемой директивы.
Вместо тега или текста плана 5 мы фактически вводим весь фрагмент из 2 элементов управления вводом для «Имя» и «Возраст», которые должны отображаться на нашей странице.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
Из приведенного выше вывода мы видим, что фрагмент кода из шаблона настраиваемой директивы добавляется на страницу.
Директивы и компоненты AngularJS - ng-transclude
Как мы уже упоминали ранее, Angular предназначен для расширения функциональности HTML. И мы уже видели, как можно внедрить код, используя настраиваемые повторно используемые директивы.
Но в современной разработке веб-приложений также существует концепция разработки веб-компонентов. По сути, это означает создание наших собственных HTML-тегов, которые можно использовать в качестве компонентов в нашем коде.
Следовательно, angular предоставляет еще один уровень возможностей для расширения тегов HTML, давая возможность вставлять атрибуты в сами теги HTML.
Это делается с помощью тега « ng-transclude », который является своего рода настройкой, указывающей angular захватывать все, что помещено в директиву в разметке.
Давайте рассмотрим пример того, как мы можем этого добиться.
Event Registration Guru99 Global Event
Angular JS
Пояснение к коду:
- Мы используем эту директиву для определения настраиваемого тега HTML, называемого «панель», и добавляем функцию, которая помещает некоторый настраиваемый код для этого тега. На выходе наш настраиваемый тег панели будет отображать текст «AngularJS» в прямоугольнике со сплошной черной рамкой.
- Атрибут "transclude" должен быть указан как истинный, который требуется angular для внедрения этого тега в нашу DOM.
- В области действия мы определяем атрибут заголовка. Атрибуты обычно определяются как пары имя / значение, например: name = "value". В нашем случае имя атрибута в HTML-теге нашей панели - «title». Символ «@» является требованием от angular. Это сделано для того, чтобы при выполнении строки title = {{title}} на шаге 5 пользовательский код для атрибута title добавлялся к тегу HTML панели.
- Пользовательский код для атрибутов заголовка, который просто рисует сплошную черную рамку для нашего элемента управления.
- Наконец, мы вызываем наш собственный тег HTML вместе с определенным атрибутом title.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
- Выходные данные ясно показывают, что атрибут title тега pane html5 был установлен на пользовательское значение "Angular.JS".
Вложенные директивы
Директивы в angular могут быть вложенными. Как и просто внутренние модули или функции на любом языке программирования, вам может потребоваться встраивать директивы друг в друга.
Вы можете лучше понять это, посмотрев пример ниже.
В этом примере мы создаем 2 директивы, которые называются «внешняя» и «внутренняя».
- Внутренняя директива отображает текст под названием «Внутренний».
- В то время как внешняя директива фактически вызывает внутреннюю директиву для отображения текста под названием «Inner».
Guru99 Global Event