Что такое директива AngularJS?

181

Я потратил довольно много времени, читая документацию AngularJS и несколько учебных пособий, и был весьма удивлен тем, насколько недоступна документация.

У меня есть простой, отвечающий на вопросы вопрос, который также может быть полезен для других, желающих приобрести AngularJS:

Что такое директива AngularJS?

Где-то должно быть простое, точное определение директивы, но сайт AngularJS предлагает эти удивительно бесполезные определения:

На домашней странице :

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

В документации разработчика :

Директивы - это способ научить HTML новым трюкам. Во время компиляции DOM директивы сравниваются с HTML и выполняются. Это позволяет директивам регистрировать поведение или преобразовывать DOM.

И есть серия разговоров о директивах, которые, как ни странно, предполагают, что аудитория уже понимает, что они есть.

Сможет ли кто-нибудь предложить для четкой ссылки точное определение того, что такое директива, которая объясняет:

  1. Что это такое (см. Четкое определение jQuery в качестве примера)
  2. Какие практические проблемы и ситуации предполагается решить
  3. Какой шаблон проектирования он воплощает, или, альтернативно, как он вписывается в предполагаемую миссию MVC / MVW AngularJS.
tohster
источник
2
Вы были со мной в ... см. Четкое определение jQuery в качестве примера.
Джошуамабина
Не уверен, как это было в 2012 году при переполнении стека, но я только пересмотрел этот вопрос и добавил тег «angular-directive». Его информация тега на самом деле дает довольно четкое определение. Кроме того, я заметил, что не могу найти вторую цитату в документах для разработчиков…
user4642212

Ответы:

142

Что это такое (см. Четкое определение jQuery в качестве примера)?

Директива по сути является функцией †, которая выполняется, когда компилятор 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, возможно, пришло время реорганизовать директивы.

Какой шаблон проектирования он воплощает или, в качестве альтернативы, как он вписывается в предполагаемую миссию MVC / MVW angularjs

Директивы - это то, где вы манипулируете DOM и ловите события DOM. Вот почему функции директивы compile и link получают «элемент» в качестве аргумента. Ты можешь

  • определить группу HTML (то есть шаблон), чтобы заменить директиву
  • привязать события к этому элементу (или его дочерним элементам)
  • добавить / удалить класс
  • изменить значение текста ()
  • следить за изменениями атрибутов, определенных в одном и том же элементе (на самом деле это значения атрибутов, которые отслеживаются - это свойства области, поэтому директива следит за «моделью» изменений)
  • и т.п.


В HTML есть такие вещи , как <a href="...">, <img src="...">, <br>, <table><tr><th>. Как бы вы описали, что такое, href, img, src, br, table, tr и th? Вот что такое директива.

Марк Райкок
источник
2
Марк, спасибо. Я думаю, что это ясно и, вероятно, ближе всего к точному ответу. Я думаю, что директивы всегда связаны с HTML-тегами, верно? Поэтому, возможно, правильнее будет сказать, что директива - это функция, связанная с тегом HTML. Таким образом, он позволяет декларативно расширять язык HTML.
Tohster
Что ж, директива может использоваться в комментарии, поэтому не все директивы должны быть связаны с тегом HTML. Например,<!-- directive: my-directive exp -->
Марк Райкок
Марк, это было бы нетрадиционным использованием директивы? т.е. директивы традиционно используются и предназначены для расширения HTML.
Тохстер
9
ОК, теперь я лучше понимаю. Можно подумать об этом: 1. DSL обычно представляют собой деревья синтаксиса 2. HTML DOM - это дерево синтаксиса DSL, но оно жесткое: теги в основном жестко спроектированы и предназначены, а не расширяемы. 3. AngularJS и механизм директив, в частности, делают HTML DOM более гибким, позволяя разработчикам создавать собственные узлы дерева. Эти узлы могут представлять новое поведение или совокупность существующих поведений (поддеревьев) 4. Таким образом, директивы позволяют HTML DOM превращаться в пользовательский DSL
tohster
1
@MarkRajcok Я борюсь с твоим последним абзацем. Это просто <div></div>директива? Вы сказали да. Но здесь нет декорации (через элемент, класс, комментарий, атрибут). Люди здесь говорят, что это маркеры для HTML DOM . Вы можете уточнить? (Я не говорю о причине, по которой вы можете создать директиву для простого элемента вроде <div>)
Ройи Намир
11

Может быть, действительно простое и начальное определение угловых директив было бы

Директивы AngularJS (ng-directives) - это HTML-атрибуты с префиксом ng (ng-model, ng-app, ng-repeat, ng-bind), используемые Angular для расширения HTML. ( из: W3schools угловой учебник )

Некоторые примеры этого будут

Нг-приложение директива определяет приложение AngularJS.

Нг-модель директива связывает значение HTML управления (ввод, выберите текстовую области ) до прикладных данных.

Нг-связывания директива связывает данные приложения с точки зрения HTML.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

Посмотрите этот урок, по крайней мере, для меня это было одно из лучших введений в Angular. Более полным подходом было бы все, что @ mark-rajcok говорил раньше.

jplozgom
источник
4

Глядя на документацию, директивы - это структуры, которые вы можете написать, которые angularjs анализирует для создания объектов и поведений. Другими словами, это шаблон, в котором вы используете сочетание любых произвольных узлов, псевдо-javascript и заполнителей для данных, чтобы выразить намерения о том, как Ваш виджет (компонент) структурирован, как он себя ведет и как он питается данными. Angularjs затем работает против этих директив чтобы перевести их в работающий html / javascript код.

Директивы есть, чтобы вы могли создавать более сложные компоненты (виджеты), используя правильную семантику. Просто взгляните на пример директив angularjs - они определяют панель вкладок (что, конечно, недопустимо в обычном HTML). Это более интуитивно , чем использование как Div-s или пролеты создать структуру , которая затем стилизованная , чтобы выглядеть на вкладке панели.

ВТК
источник
Я добавил то, что считаю чуть менее техническим объяснением.
raam86
1
Спасибо, это очень полезно. Так что, может быть, я могу думать о нем как о некоем динамическом шаблоне (похожем на класс в ОО-программировании), который инкапсулирует компонент, описывает его с помощью свойств и поведений, способен к реализации и может выражать себя в DOM? И причина, по которой он существует (по сравнению с javascript-объектом или html-шаблоном), заключается в том, что HTML-теги могут выполнять более динамичные, объектно-ориентированные действия, чтобы они могли начать манипулировать в программировании типа OO?
Tohster
Да и нет. Я бы не сказал, что причина, по которой существуют директивы, во многом связана с их манипулированием в ОО-программировании. На самом деле, общий подход angularjs к фреймворку тесно связан с HTML и произвольными атрибутами DOM-узлов, а не с написанием кода OO Javascript. Я чувствую это, глядя на все примеры того, как angularjs решает повседневные проблемы. Я бы сказал, что основная причина директив состоит в том, чтобы иметь возможность встроить поведение и данные в один семантически структурированный компонент.
WTK
3

В AngularJS директивы являются html-маркерами для элемента HTML DOM, такого как атрибут (restrict-A), имя элемента (restrict-E), комментарий (restrict-M) или класс CSS (restrict-C), которые сообщают HTML-компилятору AngularJS ($ compile) для выполнения заданного поведения с этим элементом DOM или даже преобразования элемента DOM и его потомков. Некоторым примером являются ng-bind, ng-hide / show и т. д.

Вивек Пандай
источник
2

На домашней странице об этом совершенно ясно: при наведении курсора на вкладки в последнем разделе:

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

Затем на следующей вкладке:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

Таким образом, вы можете придумать элементы html, т.е. tabsи позволить angular обрабатывать рендеринг этих элементов.

raam86
источник
2
Спасибо за быстрый ответ! Таким образом, цель директивы - расширить словарный запас HTML путем создания пользовательских тегов и атрибутов? Это кажется довольно мощным, хотя кажется, что оно решает гораздо более широкий спектр проблем, чем «MVW». Кстати, другие могут не согласиться, но я думаю, что прокрутка до конца страницы, а затем наведение курсора на слово с гиперссылкой, а затем чтение всплывающей подсказки, в которой ни разу не упоминается слово «директива», не совсем « очень четкое определение того, что такое директива. Тем не менее, очень ценю быстрый ответ.
Tohster
Да! Вы можете проверить эту скрипку, которую они сделали. Фактический HTML отличается от включения на панели HTML.
raam86