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

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

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

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

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

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

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

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

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

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

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

1. Что это такое (см. Четкое определение jQuery в качестве примера)
2. Какие практические проблемы и ситуации предполагается решить
3. Какой шаблон проектирования он воплощает, или, альтернативно, как он вписывается в предполагаемую миссию MVC / MVW AngularJS.

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

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

Директивы 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 говорил раньше.

Глядя на документацию, директивы - это структуры, которые вы можете написать, которые 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 элемента. 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 обрабатывать рендеринг этих элементов.