Я потратил довольно много времени, читая документацию AngularJS и несколько учебных пособий, и был весьма удивлен тем, насколько недоступна документация.
У меня есть простой, отвечающий на вопросы вопрос, который также может быть полезен для других, желающих приобрести AngularJS:
Что такое директива AngularJS?
Где-то должно быть простое, точное определение директивы, но сайт AngularJS предлагает эти удивительно бесполезные определения:
Директивы являются уникальной и мощной функцией, доступной в AngularJS. Директивы позволяют вам придумывать новый синтаксис HTML, специфичный для вашего приложения.
Директивы - это способ научить HTML новым трюкам. Во время компиляции DOM директивы сравниваются с HTML и выполняются. Это позволяет директивам регистрировать поведение или преобразовывать DOM.
И есть серия разговоров о директивах, которые, как ни странно, предполагают, что аудитория уже понимает, что они есть.
Сможет ли кто-нибудь предложить для четкой ссылки точное определение того, что такое директива, которая объясняет:
- Что это такое (см. Четкое определение jQuery в качестве примера)
- Какие практические проблемы и ситуации предполагается решить
- Какой шаблон проектирования он воплощает, или, альтернативно, как он вписывается в предполагаемую миссию MVC / MVW AngularJS.
источник
Ответы:
Директива по сути является функцией †, которая выполняется, когда компилятор Angular находит ее в DOM. Функция (и) может делать почти все, поэтому я думаю, что довольно сложно определить, что такое директива. У каждой директивы есть имя (например, ng-repeat, tabs, make-up-your-own), и каждая директива определяет, где ее можно использовать: элемент, атрибут, класс в комментарии.
† Обычно директива имеет только функцию (post) link. Сложная директива может иметь функцию компиляции, функцию предварительной ссылки и функцию последующей ссылки.
Самое мощное, что могут сделать директивы - это расширить HTML. Ваши расширения - это язык, определяемый доменом (DSL), для создания вашего приложения. Например, если ваше приложение работает на сайте покупок в Интернете, вы можете расширить HTML, чтобы иметь директивы «shopping-cart», «coupon», «specials» и т. Д. - любые слова, объекты или понятия более естественны для использования в » домен онлайн-покупок, а не "div" и "span" (как уже упоминалось в @WTK).
Директивы могут также компонентизировать HTML - группировать HTML в некоторый повторно используемый компонент. Если вы обнаружите, что используете ng-include для извлечения большого количества HTML, возможно, пришло время реорганизовать директивы.
Директивы - это то, где вы манипулируете DOM и ловите события DOM. Вот почему функции директивы compile и link получают «элемент» в качестве аргумента. Ты можешь
В HTML есть такие вещи , как
<a href="...">
,<img src="...">
,<br>
,<table><tr><th>
. Как бы вы описали, что такое, href, img, src, br, table, tr и th? Вот что такое директива.источник
<!-- directive: my-directive exp -->
<div></div>
директива? Вы сказали да. Но здесь нет декорации (через элемент, класс, комментарий, атрибут). Люди здесь говорят, что это маркеры для HTML DOM . Вы можете уточнить? (Я не говорю о причине, по которой вы можете создать директиву для простого элемента вроде<div>
)Может быть, действительно простое и начальное определение угловых директив было бы
Некоторые примеры этого будут
Посмотрите этот урок, по крайней мере, для меня это было одно из лучших введений в Angular. Более полным подходом было бы все, что @ mark-rajcok говорил раньше.
источник
Глядя на документацию, директивы - это структуры, которые вы можете написать, которые angularjs анализирует для создания объектов и поведений. Другими словами, это шаблон, в котором вы используете сочетание любых произвольных узлов, псевдо-javascript и заполнителей для данных, чтобы выразить намерения о том, как Ваш виджет (компонент) структурирован, как он себя ведет и как он питается данными. Angularjs затем работает против этих директив чтобы перевести их в работающий html / javascript код.
Директивы есть, чтобы вы могли создавать более сложные компоненты (виджеты), используя правильную семантику. Просто взгляните на пример директив angularjs - они определяют панель вкладок (что, конечно, недопустимо в обычном HTML). Это более интуитивно , чем использование как Div-s или пролеты создать структуру , которая затем стилизованная , чтобы выглядеть на вкладке панели.
источник
В AngularJS директивы являются html-маркерами для элемента HTML DOM, такого как атрибут (restrict-A), имя элемента (restrict-E), комментарий (restrict-M) или класс CSS (restrict-C), которые сообщают HTML-компилятору AngularJS ($ compile) для выполнения заданного поведения с этим элементом DOM или даже преобразования элемента DOM и его потомков. Некоторым примером являются ng-bind, ng-hide / show и т. д.
источник
На домашней странице об этом совершенно ясно: при наведении курсора на вкладки в последнем разделе:
Затем на следующей вкладке:
Таким образом, вы можете придумать элементы html, т.е.
tabs
и позволить angular обрабатывать рендеринг этих элементов.источник