AngularJS. Создание дирекив


Содержание материала:

AngularJS Директивы

AngularJS позволяет расширить HTML с новыми атрибутами называемые директивы.

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

AngularJS также позволяет определить свои собственные директивы.

AngularJS Директивы

AngularJS директивы распространяются HTML атрибуты с префикса ng- .

ng-app директивы инициализирует AngularJS приложение.

ng-init директива инициализирует данные приложения.

ng-model директива связывает значение управления HTML (ввод, выберите) в текстовой данных приложения.

Читайте о все директивы AngularJS в нашей AngularJS директиве эталонными .

пример

ng-app директива также говорит AngularJS , что

Связывание данных

<< firstName >> выражение, в приведенном выше примере, является AngularJS связывания данных выражение.

Связывание данных в AngularJS связывает AngularJS выражения с данными AngularJS.

<< firstName >> связана с ng-model=»firstName» .

В следующем примере два текстовых поля связаны вместе с двумя нг-модели директив:

пример

Использование ng-init не очень часто. Вы узнаете, как инициализировать данные в главе о контроллерах.

Повторяя HTML Elements

ng-repeat директива повторяет HTML элемент:

пример

ng-repeat директива фактически клонирует HTML элементы для каждого элемента в коллекции.

ng-repeat директива используется в массиве объектов:

пример

AngularJS идеально подходит для CRUD базы данных (Create Read Update Delete) приложений.
Только представьте, если эти объекты были записи из базы данных.

Директива нг-приложение

ng-app директива определяет корневой элемент в AngularJS приложения.

ng-app директива будет автоматически начальной загрузки (автоматически инициализировать) приложение , когда веб — страница загружается.

Директива нг-Init

ng-init директива определяет начальные значения для AngularJS приложения.

Как правило, вы не будете использовать нг-Init. Вы будете использовать контроллер или модуль вместо этого.

Вы узнаете больше о контроллеров и модулей позже.

Директива нг-модель

ng-model директива связывает значение управления HTML (ввод, выберите) в текстовой данных приложения.

ng-model директива может также:

  • Обеспечить тип проверки для прикладных данных (номер, адрес электронной почты, требуется).
  • Предоставление статуса данных приложения (неверно, грязный, потрогать, ошибка).
  • Предоставляет классы CSS для HTML-элементов.
  • Bind HTML элементы в HTML-формах.

Подробнее о ng-model директивы в следующей главе.

Создание новых директив

В дополнение ко всем директивам встроенные AngularJS, вы можете создавать свои собственные директивы.

Новые директивы создаются с помощью .directive функции.

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

При присвоении имен директиву, вы должны использовать имя ГорбатыйРегистр, w3TestDirective , но при вызове, вы должны использовать — отдельное название, w3-test-directive :

AngularJS-создать директиву, которая использует ng-модель

Я пытаюсь создать директиву, которая создаст поле ввода с той же ng-моделью, что и элемент, который создает директиву.

вот что я придумал до сих пор:

HTML

JavaScript

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

каков правильный способ справиться с этим?

EDIT: после снятия ng-model=»value» из шаблона, это, кажется, работает нормально. Тем не менее, я буду держать этот вопрос открытым, потому что я хочу проверить, что это правильный способ сделать это.

8 ответов:

Это на самом деле довольно хорошая логика, но вы можете упростить вещи немного.

директива

Html с директивой

вы можете увидеть его в действии с этим Plunker.

  • я понимаю, почему вы хотите использовать НГ-модель, но в вашем случае это не обязательно. НГ-модель-это ссылка существующей html элементы со значением в масштаб. Поскольку вы сами создаете директиву, вы создаете «новый» html-элемент, поэтому вам не нужна ng-модель.


EDIT как упоминал Марк в своем комментарии, нет никаких причин, что вы не могу используйте НГ-модель, как раз для того чтобы держать с Конвенцией.

  • явно создавая область в вашей директиве («изолированная» область), область директивы не может получить доступ к переменной » имя » в родительской области (вот почему, я думаю, вы хотели использовать ng-модель).
  • я удалил ngModel из вашей директивы и заменил его пользовательским именем, которое вы можете изменить на что угодно.
  • то, что заставляет все это работать, — это знак ‘=’ в области видимости. Проверьте документы docs под заголовком ‘scope’.

В общем, ваши директивы должны использовать изолированную область (что вы сделали правильно) и использовать область типа’=’, если вы хотите, чтобы значение в вашей директиве всегда карте значение в родительской области.

Я взял комбинацию всех ответов, и теперь есть два способа сделать это с атрибутом ng-model:

  • С новой областью, которая копирует ngModel
  • С той же областью, которая делает компиляцию по ссылке

Я не уверен, что мне нравится компиляция во время ссылки. Однако, если вы просто заменяете элемент другим, вам не нужно этого делать.

в целом, я предпочитаю первый. Просто установите scope в и set ng-model=»ngModel» где вы хотите его в свой шаблон.

обновление: я вставил фрагмент кода и обновил его для Angular v1.2. Оказывается, что изолировать область все еще лучше, особенно если не использовать jQuery. Так что все сводится к:

вы заменяете один элемент: просто замените его, оставьте область в покое, но обратите внимание, что replace не рекомендуется для П2.0:

в противном случае используйте это:

это не так сложно: в вашем dirctive используйте псевдоним: scope:

в вашем html, Используйте как обычно

вам нужна только ng-модель, когда вам нужно получить доступ к $viewValue модели или $modelValue. Смотрите NgModelController. И в этом случае, вы должны использовать require: ‘^ngModel’ .

остальное смотрите в разделе Ройс ответ.

Это немного поздний ответ, но я нашел это удивительным post о NgModelController Я думаю, что это именно то, что вы искали.

TL; DR — вы можете использовать require: ‘ngModel’ и затем добавить NgModelController своими руками функции:

Топ-пост этого месяца:  Google выпустил веб-приложение для рисования Chrome Canvas

таким образом, никаких хаков не требуется — вы используете встроенный угловой ng-model

Я бы не устанавливал ngmodel через атрибут, вы можете указать его прямо в шаблоне:

с углового 1.5 можно использовать компоненты. Компоненты-это путь к выходу и решает эту проблему легко.

внутри вашего контроллера все, что вам нужно сделать, это:

создание изолированной области нежелательно. Я бы избегал использования атрибута scope и сделал что-то вроде этого. область применения:настоящий дает вам новые возможности ребенка, но не изолировать. Затем используйте parse, чтобы указать переменную локальной области на тот же объект, который пользователь предоставил атрибуту ngModel.

Общение директив между собой в AngularJS

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

Очень часто при написании директив возникает необходимость в их взаимодействии, общении, чтоб одна из них могла, например, вызвать метод добавления нового элемента в массиве у другой. В AngularJS есть для этого готовый механизм, который мы сейчас и рассмотрим.

Ну что же, приступим к написанию нашего приложения, которое прояснит нам смысл этой загадочной опции require:

В этом коде мы видим директиву developer со своим контроллером, который будет использоваться в качестве API (Application Programming Interface) при взаимодействии с другими директивами. Суть директивы developer проста — при наведении на элемент в консоль выводится список навыков разработчика.

Далее, мы добавим следующий код, который создаёт ещё одну директиву внутри приложения для взаимодействия с директивой developer.

Как видно из кода, у директивы есть свойство require, которое делает инъекцию контроллера, расположенного в другой директиве developer, в link-функцию создаваемой путём добавления параметра функции (здесь это developerCtrl).

Надо заметить, что у этого параметра, запрашивающего контроллер, нет требований и соглашений по именованию.

Создадим ещё две директивы — «html» и «angularjs»:

Теперь каждая из этих директив связана с внешними API-методами контроллера директивы developer.

Мы можем изменить нашу разметку, добавив новые навыки нашему разработчику:

Как и предполагалось, отдельные директивы взаимодействуют с контроллером директивы элемента.

Изолированная область видимости

Но не всё так хорошо, как нам кажется! Давайте создадим несколько экземпляров директивы developer:

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

Решением данной проблемы будет создание изолированной области видимости для директивы developer. Давайте так и сделаем:

Вы можете посмотреть на полный код нашего приложения:

Общение с вышерасположенной директивой

В примерах выше происходило общение директив одного DOM-элемента (в нашем случае элемент developer). Но в некоторых случаях есть необходимость во взаимодействии между директивами на разных уровнях. Например, нижележащий элемент что-то делает с вышестоящим. На этот случай также есть готовое решение внутри фрэймворка. Для этого достаточно добавить в значение опции require префикс «^» («циркумфлекс» или «крышечка» в простонародье). Этот префикс означает, что директива будет искать контроллер на своем элементе или на элементах, расположенных выше.
Посмотрите на изменение кода в нашем приложении. Тут показано на примере общение вложенной директивы и расположенной на том же элементе:

Маленькое дополнение

Теперь, когда мы знаем, для чего нужна опция require, будет приятно узнать, что она может принимать в качестве значения несколько параметров, т.е. общение может происходить с несколькими директивами одновременно. В таком случае мы получим в функцию link вызывающей директивы не контроллер, а массив контроллеров. Пример:

И ещё, хотелось бы с тобой поделиться советом из документации AngularJS по написанию директив. Кто-то из вас может спросить, в чём разница опции controller и link у директив? Основное различие в том, что контроллер может выставлять некий API наружу. Отсюда вывод, который относится к категории «Best Practices»: используйте опцию controller, если вы хотите дать API для других директив. В других случаях используйте функцию link.

Заключение

Ну что же? Я очень надеюсь, что эта статья тебе понравилась, и ты стал лучше понимать междирективное взаимодействие в AngularJS. Используя этот метод можно решить многие нетривиальные задачи, возникающие при разработке клиентского приложения. Не забудь поделиться ссылкой со всеми интересующимися!

Использование директив в AngularJS: Теория и практика

| Пятница, 30 августа, 2013

Причины разделения процессов компиляции и связывания

После, прочитанного возникает вопрос, почему процесс компиляции разбивается на два шага, на компиляцию и связывание. Чтобы понять это, рассмотрим пример с циклом (ng-repeat), взятый из реального приложения:

Если коротко объяснить, то разделение компиляции и связывания необходимо каждый раз, когда изменения в модели приводят к изменениям в DOM структуре, которая генерируется циклом (ng-repeat).

Когда компилируется выше приведенный пример, компилятор проходит каждый узел в цикле и ищет в нем директивы. Конструкция <> – это пример директивы вставки (interpolation). Но ngRepeat это уже директива совсем другого типа. Эта директива должна штамповать новый элемент li для каждого объекта action в коллекции user.actions. Это значит, что нужно сохранить чистую копию шаблона элемента li для его клонирования, когда вставляются новые объекты actions. То есть шаблон элемента li нужен для клонирования и вставки в элемент ul. Но недостаточно просто клонировать элемент li, еще нужно скомпилировать этот шаблон, чтобы директивы этого шаблона правильно обработались нужным объектом scope (область видимости). Но компиляция каждого элемента li была бы слишком затратной, так как процесс компиляции требует обхода всей структуры DOM для поиска директив и их запуска. Если бы компиляция срабатывала внутри каждого цикла, с коллекцией из 100 объектов, то проблемы с производительностью не заставили бы себя ждать.

Поэтому появилось решение разделить процесс компиляции на две фазы; то есть фаза компиляции, когда все директивы найдены и отсортированы по приоритету и фаза связывания, когда выполняется вся работа по связыванию определенных объектов scope с соответствующими экземплярами конструкций li.

ngRepeat работает, предотвращая процесс компиляции внутри элементов li. Вместо этого ngRepeat компилирует li отдельно. Результатом компиляции элемента li будет являться связующая функция, содержащая все директивы, найденные в элементе li. И эта функция готова прикрепиться к каждому конкретному клону элемента li. Во время выполнения приложения ngRepeat клонирует элемент li, создает для него элемент scope и вызывает связующую функцию для клонированного li.

  • Функция компилирования. Она достаточно редка в самих директивах, поскольку большинство директив в основном работают c экземплярами элементов DOM и редко изменяют структуру этих элементов.
  • Связующая функция. Почти все директивы имеют связующую функцию. Связующая функция позволяет регистрировать специальные объекты listeners(слушатели) для конкретных экземпляров клонированных элементов DOM и заодно копирует содержимое из объекта scope в DOM.
Топ-пост этого месяца:  Категории функций — WooCommerce — WordPress

Создание директив (Простой способ)


В примере ниже показано, как создать директиву, которая показывает текущее время:

AngularJS — Пользовательские директивы

Пользовательские директивы используются в AngularJS для расширения функциональности HTML. Пользовательские директивы определяются с помощью функции «директива». Пользовательская директива просто заменяет элемент, для которого он активирован. Приложение AngularJS во время загрузки загружает совпадающие элементы и выполняет однократное действие, используя свой метод compile() настраиваемой директивы, а затем обрабатывает элемент с помощью метода link () настраиваемой директивы на основе области действия директивы. AngularJS обеспечивает поддержку для создания настраиваемых директив для следующих типов элементов.

  • Директивы элементов — Директива активируется, когда встречается соответствующий элемент.
  • Атрибут — Директива активируется , когда атрибут соответствия встречается.
  • CSS — Директива активируется, когда встречается соответствующий стиль css.
  • Комментарий — директива активируется, когда встречается соответствующий комментарий.

Внимание.

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Google Chrome

Mozilla Firefox

Yandex

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

Определите пользовательские теги html.

Определите настраиваемую директиву для обработки над пользовательскими тегами html.

Определите контроллер для обновления области действия директивы. Здесь мы используем значение атрибута name как дочерний объект.

Создание директивы Angularjs

У меня есть набор из двух функций, которые я пользователь, чтобы выполнить поиск для идентификации пользователя. В моем приложении мне нужно сделать это для нескольких ролей (i.e: requester, обработчик, etc.). Я думаю, что я хочу создать директиву, чтобы я мог повторно использовать код без необходимости копировать и изменять его для каждой роли — если я понимаю концепцию директивы.

Я сделал попытку, но вместо того, чтобы поле ввода на самом деле появляется для меня, чтобы ввести имя, я вижу имя файла html шаблона. Очевидно, что я делаю что-то неправильно, но так как я очень новичок в директивах (пользовательские и создание их), я уверен, что я не сделал это правильно.

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

Это то, что я вставил в свой HTML, чтобы назвать мою директиву:

requesterId и requester, где я хочу результаты.

Мой шаблон имеет:

В настоящее время каждый раз, когда мне нужен другой идентификатор пользователя/имя для роли, я должен скопировать функции и изменить имена и номер строки…Я действительно думаю, что должен быть способ сделать это, чтобы я мог позвонить ему несколько раз и просто передать значения модели, которые я хочу. Хотя приведенный выше код не дает мне никаких ошибок, он не предоставляет мне поле ввода и функциональность для выполнения поиска….пожалуйста помочь.

1 ответ

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

Мой HTML изменен (inModel в id-модель и nameModel в name-модель):

Создание директивы Angularjs

У меня есть набор из двух функций, которые я пользователь, чтобы выполнить поиск для идентификации пользователя. В моем приложении мне нужно сделать это для нескольких ролей (i.e: requester, обработчик, etc.). Я думаю, что я хочу создать директиву, чтобы я мог повторно использовать код без необходимости копировать и изменять его для каждой роли — если я понимаю концепцию директивы.

Я сделал попытку, но вместо того, чтобы поле ввода на самом деле появляется для меня, чтобы ввести имя, я вижу имя файла html шаблона. Очевидно, что я делаю что-то неправильно, но так как я очень новичок в директивах (пользовательские и создание их), я уверен, что я не сделал это правильно.

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

Это то, что я вставил в свой HTML, чтобы назвать мою директиву:

requesterId и requester, где я хочу результаты.

Мой шаблон имеет:

В настоящее время каждый раз, когда мне нужен другой идентификатор пользователя/имя для роли, я должен скопировать функции и изменить имена и номер строки…Я действительно думаю, что должен быть способ сделать это, чтобы я мог позвонить ему несколько раз и просто передать значения модели, которые я хочу. Хотя приведенный выше код не дает мне никаких ошибок, он не предоставляет мне поле ввода и функциональность для выполнения поиска….пожалуйста помочь.

1 ответ

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

Мой HTML изменен (inModel в id-модель и nameModel в name-модель):

Добавить директивы из директивы в AngularJS

Я пытаюсь создать директиву, которая заботится о добавлении дополнительных директив к элементу, который он объявлен. Например, я хочу создать директиву, которая позаботится о добавлении datepicker , datepicker-language и ng-required=»true» .

Если я попытаюсь добавить эти атрибуты, а затем использовать $compile , я, очевидно, создаю бесконечный цикл, поэтому я проверяю, добавили ли я уже необходимые атрибуты:

Конечно, если я не $compile элемент, атрибуты будут установлены, но директива не будет загружена.

Является ли этот подход правильным или я делаю это неправильно? Есть ли лучший способ достичь такого же поведения?

UDPATE: учитывая тот факт, что $compile — единственный способ добиться этого, есть ли способ пропустить первый прогон компиляции (элемент может содержать несколько дочерних элементов)? Возможно, установив terminal:true ?

ОБНОВЛЕНИЕ 2. Я попытался поместить директиву в элемент select , и, как и ожидалось, компиляция выполняется дважды, что означает, что в два раза больше ожидаемых option s.

Топ-пост этого месяца:  Новые возможности в Bootstrap 4 Alpha

В случаях, когда у вас есть несколько директив для одного элемента DOM и где порядок, в котором они применяются, вы можете использовать свойство priority для заказа своих выражение. Сначала выполняются более высокие номера. Приоритет по умолчанию — 0, если вы не указали его.

EDIT: после обсуждения здесь представлено полное рабочее решение. Ключ был удалить атрибут: element.removeAttr(«common-things»); , а также element.removeAttr(«data-common-things»); (в случае, если пользователи указывают data-common-things в html)

Объяснение, почему мы должны установить terminal: true и priority: 1000 (большое число):

Когда DOM готов, angular идет по DOM, чтобы идентифицировать все зарегистрированные директивы и скомпилировать директивы один за другим на основе priority , если эти директивы находятся на одном и том же элементе. Мы устанавливаем приоритет нашей персонализированной директивы на большое количество, чтобы убедиться, что он будет скомпилирован сначала и terminal: true , остальные директивы будут пропущены после компиляции этой директивы.

Когда наша пользовательская директива компилируется, она будет изменять элемент, добавляя директивы и удаляя себя и используя службу компиляции $ скомпилировать все директивы (включая те, которые были пропущены).

Если мы не устанавливаем terminal:true и priority: 1000 , существует вероятность того, что некоторые директивы будут скомпилированы до нашей специальной директивой. И когда наша настраиваемая директива использует компиляцию $, чтобы скомпилировать элемент = > снова скомпилировать уже скомпилированные директивы. Это вызовет непредсказуемое поведение, особенно если директивы, скомпилированные до нашей пользовательской директивы, уже изменили DOM.

Дополнительные сведения о приоритете и терминале см. Как понять` terminal` директивы?

Примером директивы, которая также модифицирует шаблон, является ng-repeat (priority = 1000), когда ng-repeat скомпилирован, ng-repeat делает копии элемента шаблона перед применением других директив.

Вопрос по angularjs-directive, angularjs &#8211 создание новой директивы с angularjs

так что я’Я делаю простую директиву под названием «парить», Это’Это базовое навигационное меню, при котором при наведении указателя мыши на конкретную аба эта аба меняет цвет. Смотрите мой код скрипта:

А теперь мой HTML:

Это работает нормально, но когда я поместил свой HTML таким образом:

Это неработать, я должен обернутьЛи» с «парить» тег, чтобы сделать эту работу (и да, яизменяя свойство restrict на «A»), Зачем? И еще один вопрос, заворачиваяЛи» с «парить» тег плохой трюк для проверки моего HTML?

Это мой HTML составлен:


Когда я передаю мышь над этими элементами, моя функция: «onHover» Безразлично»т называется.

Извините, я обновляю сейчас, но я изменил свойство на «A».

+ Изменить restrict: ‘E’ , это означает «ограничить элемент » в restrict: ‘A’ , это означает «ограничить атрибутом

Вы ограничиваете директиву типом E как в Element , вам нужно изучить другие типы ограничений, классы, атрибуты и т. д. Звучит так, как вы хотите restrict: ‘A’

WEB start

Компьютеры. Интернет. Заочное профессиональное обучение. 055-966-10-17

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения 055-966-10-17

  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT — технологий.

Наши преимущества

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

Регистрация на сайте

Angular Директивы (1)

Директивы (Angular directives)

Директивы используятся для манипуляций с DOM: удалить, добавить, изменить элемент или его свойства-атрибуты.

Angular 5 использует директивы, которые можно разделить на:

  • Компоненты (Angular components)
  • Структурные директивы (Angular structural directives)
  • Директивы-атрибуты (Angular attribute directives)
  • Встроенные директивы (Angular built in directives)
  • Пользовательские директивы (Angular custom directives)

Компоненты (Angular components)

Тип директивы, который использует шаблон. Это наиболее часто используемый тип директив. Angular. Внутри такой директивы можно использовать другие директивы, типа: всроенные, пользовательские.

ng generate component students

Angular CLI создаст в папке ./src/app файлы компонента:

  • students.component.css
  • students.component.html
  • students.component.spec.ts
  • students.component.ts

TypeScript код компонента — в файле: students.component.ts

В файл app-modules.ts автоматически добавляются строки:

и в секцию declaration:

Структурные (Angular structural directives)

Позволяют менять структуру DOM, добавляя, удаляя, изменяя элементы.

Структурные директивы могут использоваться с HTML тегом или без него.

Существуют три встроенных структурных директивы: NgIf, NgFor и NgSwitch.

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

Изменим шаблон компонента:

Компонент <> работает

Список студентов:

  • Номер: <> Имя:<> Курс:<>
  • Четный:<> Курс:<>
  • Четный:<> Курс:<><> Курс:<>

I am the content to show

Локальные переменные ngFor

  • index: number: индекс текущего элемента в итерации
  • first: boolean: ИСТИНА , если элемент — первый в итерации
  • last: boolean: ИСТИНА , если элемент — последний в итерации
  • even: boolean: ИСТИНА , если элемент имеет чётный индекс
  • odd: boolean: ИСТИНА , если элемент имеет нечётный индекс
    Список студентов:
  • Номер: <> Имя:<> Курс:<>

Используем в качестве переключателя внутреннюю переменную even цикла ngFor

Директивы-свойства (Angular 5 attribute directives)

Позволяют менять внешний вид элементов посредством изменения их атрибутов.

Встроенные директивы (Angular built in directives)

Это, например, директивы:

Пользовательские директивы (Angular custom derectives)

ng create directive my-dir1

Отредактировать TypeScript — my-dir1.directive.ts

Welcome to << title >>!

Класс ElementRef обеспечивает доступ к объектам DOM

Класс Renderer2 представляет собой абстракцию, предоставляемую Angular в виде сервиса, который позволяет управлять элементами приложения без непосредственного доступа к DOM. Это рекомендуемый подход, потому что он упрощает разработку приложений, которые могут отображаться в средах, не имеющих доступа к DOM, например, на сервере, web-workers или на мобильном устройстве.

Renderer2 часто используется в пользовательских директивах из-за того, что Angular директивы используются для модификации элементов.

Этот пример В этом примере мы создаем новый div и создаем текстовый узел. Затем мы помещаем текстовый узел в наш новый div и, наконец, наш div добавляется к элементу, на который ссылается наша директива:

Добавить комментарий