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

Ответ 1

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

Директива - это по существу функция ^{& dagger;} которая выполняется, когда компилятор Angular находит его в DOM. Функция может делать почти все, поэтому я думаю, что довольно сложно определить, что такое директива. Каждая директива имеет имя (например, ng-repeat, tabs, make-up-your-own), и каждая директива определяет, где она может использоваться: element, attribute, class, в комментарии.

^{& dagger;} В директиве обычно есть функция (post) link. Сложная директива может иметь функцию компиляции, функцию предварительной ссылки и функцию пост-ссылки.

Какие практические проблемы и ситуации он должен решить?

Самые мощные директивы, которые могут быть выполнены, - это расширение HTML. Ваши расширения - это "Язык, специфичный для домена" (DSL) для создания вашего приложения. Например, если ваше приложение запускает интернет-сайт для покупок, вы можете расширить HTML-код, чтобы иметь "корзину покупок" , "купон" , "специальные предложения" и т.д. Директивы - любые слова или объекты или концепции более естественны для использования в рамках "онлайн-покупок" , а не "div" и "span" (как уже упоминалось @WTK).

Директивы также могут компоновать HTML-группу связкой HTML в некоторый многоразовый компонент. Если вы обнаружите, что используете ng-include для загрузки большого количества HTML файлов, вероятно, пора реорганизовать в директивы.

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

Директивы - это то, где вы управляете DOM и захватываете события DOM. Вот почему функции компиляции и ссылки в директиве получают "элемент" в качестве аргумента. Вы можете

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

Ответ 2

Возможно, действительно простое и начальное определение для директив angular было бы

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

Вот некоторые примеры этого:

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

Директива ng-model связывает значение элементов управления HTML (ввода, select, textarea) к данным приложения.

Директива ng-bind связывает данные приложения с представлением HTML.

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

На этой странице очень ясно сказано: Когда вы наводите курсор на вкладки в последнем разделе:

Мы расширили словарь 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-элементы i.e tabs и позволить angular обрабатывать рендеринг этих элементов.