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

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

У мене є просте, відповідальне запитання, яке також може бути корисним для інших, хто хоче підібрати AngularJS:

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

Десь має бути просте, точне визначення директиви, але веб-сайт AngularJS пропонує ці дивно марні визначення:

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

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

У документації для розробника :

Директиви - це спосіб навчити HTML нових хитрощів. Під час компіляції DOM директиви співпадають з HTML і виконуються. Це дозволяє директивам реєструвати поведінку або трансформувати DOM.

І є низка розмов про директиви, які, як не дивно, припускають, що аудиторія вже розуміє, що вони є.

Хтось міг би запропонувати для чіткого посилання точне визначення того, що таке директива, що пояснює:

1. Що це таке (див. Чітке визначення jQuery як приклад)
2. Які практичні проблеми та ситуації він має на меті вирішити
3. Який шаблон дизайну вона втілює, або в якості альтернативи, як вона вписується в претендував MVC / MVW місії AngularJS.

Що це таке (див. Чітке визначення jQuery як приклад)?

Директива - це по суті функція ^†, яка виконується, коли кутовий компілятор знайде її в DOM. Функції можуть виконувати практично все, саме тому я вважаю, що визначити, що таке директива, досить складно. Кожна директива має назву (наприклад, ng-повторення, вкладки, макіяж-свій-власний), і кожна директива визначає, де її можна використовувати: елемент, атрибут, клас, у коментарі.

^† Директива, як правило, має лише функцію (пост) зв'язку. Складна директива може мати функцію компіляції, функцію попереднього посилання та функцію після посилання.

З якими практичними проблемами та ситуаціями планується вирішити?

Найпотужніші директиви, які можна зробити, - це розширити HTML. Ваші розширення - це мова, орієнтована на домен (DSL) для створення вашої програми. Наприклад, якщо ваша програма працює на веб-сайті для покупок, ви можете розширити HTML, щоб мати директиви "кошик для покупок", "купон", "спеціальні" тощо. Інтернет-домен ", а не" div "і" span "s (як @WTK вже згадувалося).

Директиви також можуть складати HTML - згрупувати купу HTML у якийсь компонент для багаторазового використання. Якщо ви виявите, що використовуєте ng-include для отримання великої кількості HTML-кодів, напевно, час перетворити на директиви.

Яку модель дизайну вона втілює, або, як альтернатива, як вона вписується в передбачувану місію МВС / МВС angularjs

Директиви - це те, де ви маніпулюєте DOM та ловите події DOM. Ось чому функції компіляції та зв’язку директиви обидва отримують "елемент" як аргумент. Ти можеш

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

Можливо, було б дійсно простим і початковим визначенням кутових директив

AngularJS директиви (ng-директиви) - це атрибути HTML з префіксом ng (ng-модель, ng-додаток, ng-повторення, ng-прив'язка), що використовується 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, такі як атрибут (обмеження A), ім'я елемента (обмеження-E), коментар (обмеження-M) або клас CSS (обмеження - С), які повідомляють компілятор HTML AngularJS ($ компілювати) для виконання заданої поведінки для цього елемента DOM або навіть перетворення елемента DOM та його дітей. Прикладом деяких є ng-bind, ng-hid / 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дозволити кутовій обробці цих зображень.