Я бив головою об стіну на цьому пару днів, і відчуваю, що трохи більше пояснень в порядку.
В основному, документи згадують, що розлука значною мірою є підвищенням продуктивності. Я ще раз зазначу, що фаза компіляції використовується в основному тоді, коли вам потрібно змінити DOM до того, як самі елементи будуть складені.
Для наших цілей я наголошу на термінології, яка інакше заплутує:
SERVICE компілятора ($ compile) - це кутовий механізм, який обробляє DOM і виконує різні біти коду в директивах.
ФУНКЦІЯ компіляції - це один біт коду в межах директиви, який запускається в певний час ПО SERVICE компілятора ($ compile).
Деякі зауваження щодо компіляції ФУНКЦІЇ:
Ви не можете змінювати елемент ROOT (той, на який впливає ваша директива), оскільки він вже компілюється із зовнішнього рівня DOM (компіляція SERVICE вже сканувала директиви щодо цього елемента).
Якщо ви хочете додати інші директиви до (вкладених) елементів, виконайте такі дії:
Додавати їх потрібно на етапі компіляції.
Доведеться ввести службу компіляції у фазу зв’язку та скласти елементи вручну. АЛЕ, остерігайтесь складати щось двічі!
Також корисно побачити, як працюють вкладені та явні дзвінки до $ compile, тому я створив майданчик для перегляду цього сайту на http://jsbin.com/imUPAMoV/1/edit . В основному, він просто записує кроки до console.log.
Я повідомлю результати того, що ви побачили в цьому смітнику тут. Для DOM користувацьких директив tp і sp вкладені так:
<tp>
<sp>
</sp>
</tp>
Кутова компіляція SERVICE зателефонує:
tp compile
sp compile
tp pre-link
sp pre-link
sp post-link
tp post-link
Код jsbin також має tp post-link FUNCTION, явно викликає компіляцію SERVICE за третьою директивою (вгору), яка виконує всі три етапи в кінці.
Тепер я хочу пройти кілька сценаріїв, щоб показати, як можна було б скористатися компіляцією та посиланням, щоб робити різні речі:
СЦЕНАРІЯ 1: Директива як MACRO
Ви хочете динамічно додати директиву (скажімо, ng-show) до чогось у вашому шаблоні, що ви можете отримати з атрибута.
Скажіть, у вас є шаблонUrl, який вказує на:
<div><span><input type="text"></span><div>
і вам потрібна спеціальна директива:
<my-field model="state" name="address"></my-field>
що перетворює DOM на це:
<div><span ng-show="state.visible.address"><input ng-model="state.fields.address" ...>
в основному, ви хочете зменшити плиту котла, маючи деяку послідовну структуру моделі, яку ваша директива може інтерпретувати. Іншими словами: ви хочете макрос.
Це прекрасне використання для етапу компіляції, оскільки ви можете базувати всі маніпуляції DOM на речах, які ви знаєте лише з атрибутів. Просто додайте атрибути jQuery:
compile: function(tele, tattr) {
var span = jQuery(tele).find('span').first();
span.attr('ng-show', tattr.model + ".visible." + tattr.name);
...
return {
pre: function() { },
post: function() {}
};
}
Послідовність операцій буде (ви можете побачити це через згаданий раніше jsbin):
- Компіляція SERVICE знаходить моє поле
- Він викликає компіляцію FUNCTION за директивою, яка оновлює DOM.
- Потім компільований SERVICE заходить в отриманий DOM і КОМПІЛЮЄ (рекурсивно)
- Потім компіляція SERVICE викликає попереднє посилання зверху вниз
- Потім компіляція SERVICE викликає післяпосилання BOTTOM UP, тому функція зв'язку мого поля називається ПІСЛЯ внутрішніх вузлів були пов'язані.
У наведеному вище прикладі ніяких зв'язків не потрібно, оскільки вся робота директиви була виконана у компіляції FUNCTION.
У будь-якій точці код директиви може попросити компілятор SERVICE запустити додаткові елементи.
Це означає, що ми можемо зробити те саме, що і у функції посилання, якщо ви введете службу компіляції:
directive('d', function($compile) {
return {
// REMEMBER, link is called AFTER nested elements have been compiled and linked!
link: function(scope, iele, iattr) {
var span = jQuery(iele).find('span').first();
span.attr('ng-show', iattr.model + ".visible." + iattr.name);
// CAREFUL! If span had directives on it before
// you will cause them to be processed again:
$compile(span)(scope);
}
});
Якщо ви впевнені, що елементи, які ви переходите до $ compile SERVICE, спочатку були без директив (наприклад, вони походили із визначеного вами шаблону, або ви просто створили їх з angular.element ()), то кінцевий результат досить великий те саме, що і раніше (хоча ви, можливо, повторюєте якусь роботу). Однак, якщо в елементі були інші директиви щодо нього, ви просто змусили їх знову обробитись, що може спричинити різного роду хаотичну поведінку (наприклад, подвійну реєстрацію подій та годинників).
Таким чином, фаза компіляції є набагато кращим вибором для роботи в макро-стилі.
SCENARIO 2: Конфігурація DOM за допомогою даних про область
Це випливає з наведеного вище прикладу. Припустимо, вам потрібен доступ до області, маніпулюючи DOM. Ну, і в цьому випадку розділ компіляції для вас марний, оскільки це відбувається ще до того, як буде доступна область застосування.
Отже, скажімо, ви хочете сутенірувати введення з валідаціями, але ви хочете експортувати валідації з класу ORM на стороні сервера (DRY) та дозволити їх автоматично застосувати та створити відповідний інтерфейс на стороні клієнта для цих перевірок.
Ваша модель може натиснути:
scope.metadata = {
validations: {
address: [ {
pattern: '^[0-9]',
message: "Address must begin with a number"
},
{ maxlength: 100,
message: "Address too long"
} ]
}
};
scope.state = {
address: '123 Fern Dr'
};
і вам може знадобитися директива:
<form name="theForm">
<my-field model="state" metadata="metadata" name="address">
</form>
автоматично включати відповідні директиви та діви для показу різних помилок перевірки:
<form name="theForm">
<div>
<input ng-model="state.address" type="text">
<div ng-show="theForm.address.$error.pattern">Address must begin with a number</input>
...
У цьому випадку вам обов'язково потрібен доступ до області (оскільки саме там зберігаються ваші перевірки), і вам доведеться збирати доповнення вручну, знову ж таки обережно, щоб не подвійно складати речі. (як бічна примітка, вам потрібно буде вказати ім'я тегу форми, що міститься (я припускаю, що форма тут), і можна отримати доступ до нього у зв’язку з iElement.parent (). контролером ('форма'). $ name) .
У цьому випадку немає сенсу писати функцію компіляції. Посилання - це дійсно те, що ви хочете. Етапи:
- Визначте шаблон, повністю позбавлений кутових директив.
- Визначте функцію зв’язку, яка додає різні атрибути
- ВИДАЛУЙТЕ будь-які кутові директиви, які можна дозволити для елемента верхнього рівня (директива мого поля). Вони вже оброблені, і це спосіб уберегти їх від подвійної обробки.
- Закінчіть, зателефонувавши до компіляції SERVICE на елементі верхнього рівня
Так:
angular.module('app', []).
directive('my-field', function($compile) {
return {
link: function(scope, iele, iattr) {
// jquery additions via attr()
// remove ng attr from top-level iele (to avoid duplicate processing)
$compile(iele)(scope); // will pick up additions
}
};
});
Звичайно, ви можете зібрати вкладені елементи по одному, щоб уникнути занепокоєння з приводу повторної обробки ng директив, коли ви знову компілюєте елемент верхнього рівня.
Останнє зауваження щодо цього сценарію: я мав на увазі, що ви будете витісняти визначення валідацій із сервера, і в своєму прикладі я показав їх як дані, які вже є в області застосування. Я залишаю це читачею вправою зрозуміти, як можна боротися з необхідністю витягати ці дані з API REST (підказка: відкладена компіляція).
SCENARIO 3: двостороння прив'язка даних через посилання
Звичайно, найпоширенішим використанням посилання є просто підключення двостороннього зв’язування даних за допомогою перегляду / застосування. Більшість директив підпадає під цю категорію, тож вона адекватно охоплена в інших місцях.
