Я несколько дней бью головой об стену, и чувствую, что нужно немного больше объяснений.
В основном, в документах упоминается, что разделение в значительной степени повышает производительность. Я хотел бы повторить, что фаза компиляции в основном используется, когда вам нужно изменить DOM ДО того, как сами подэлементы скомпилированы.
Для наших целей я собираюсь подчеркнуть терминологию, которая в противном случае сбивает с толку:
Компилятор SERVICE ($ compile) - это угловой механизм, который обрабатывает DOM и запускает различные биты кода в директивах.
ФУНКЦИЯ компиляции - это один бит кода в директиве, который запускается в определенное время с помощью SERVICE компилятора ($ compile).
Некоторые заметки о функции компиляции:
Вы не можете изменить элемент ROOT (тот, на который влияет ваша директива), поскольку он уже компилируется с внешнего уровня DOM (СЕРВИС компиляции уже сканировал директивы для этого элемента).
Если вы хотите добавить другие директивы к (вложенным) элементам, вы либо:
Нужно добавить их на этапе компиляции.
Необходимо ввести сервис компиляции в фазу компоновки и скомпилировать элементы вручную. НО, остерегайтесь что-то компилировать дважды!
Также полезно посмотреть, как работают вложенные и явные вызовы $ 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, явно вызывающую СЕРВИС компиляции по третьей директиве (вверх), которая выполняет все три шага в конце.
Теперь я хочу пройтись по паре сценариев, чтобы показать, как можно использовать компиляцию и ссылку для различных действий:
СЦЕНАРИЙ 1: Директива как МАКРО
Вы хотите динамически добавить директиву (скажем, ng-show) к чему-то в вашем шаблоне, которое вы можете получить из атрибута.
Скажем, у вас есть templateUrl, который указывает на:
<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, упомянутый ранее):
- СЕРВИС компиляции находит my-field
- Он вызывает FUNCTION компиляции в директиве, которая обновляет DOM.
- СЕРВИС компиляции затем входит в получившуюся DOM, и COMPILES (рекурсивно)
- СЕРВИС компиляции затем вызывает предварительную ссылку сверху вниз
- Затем СЕРВИС компиляции вызывает post-link BOTTOM UP, поэтому функция ссылки my-field называется AFTER, внутренние узлы были связаны.
В приведенном выше примере связывание не требуется, поскольку вся работа директивы была выполнена в функции 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 ()), то конечный результат в значительной степени так же, как и раньше (хотя вы можете повторять какую-то работу). Однако, если у элемента были другие директивы, вы просто вызывали их повторную обработку, что может вызывать все виды ошибочного поведения (например, двойная регистрация событий и наблюдений).
Таким образом, фаза компиляции - намного лучший выбор для работы в стиле макросов.
СЦЕНАРИЙ 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>
для автоматического включения правильных директив и элементов div для отображения различных ошибок проверки:
<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>
...
В этом случае вам определенно необходим доступ к области (поскольку именно там хранятся ваши проверки), и вам придется скомпилировать дополнения вручную, опять же будьте осторожны, чтобы не скомпилировать что-либо дважды. (в качестве примечания, вам нужно будет установить имя для тега формы, содержащего форму (здесь я предполагаю theForm), и получить к нему доступ в связи с iElement.parent (). controller ('form'). $ name) ,
В этом случае нет смысла писать функцию компиляции. Ссылка действительно то, что вы хотите. Шаги будут:
- Определите шаблон, который полностью лишен угловых директив.
- Определите функцию связи, которая добавляет различные атрибуты
- УДАЛИТЕ любые угловые директивы, которые вы можете разрешить в элементе верхнего уровня (директива my-field). Они уже обработаны, и это способ предотвратить двойную обработку.
- Завершите, вызвав СЕРВИС компиляции для вашего элемента верхнего уровня
Вот так:
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 при повторной компиляции элемента верхнего уровня.
Последнее замечание по этому сценарию: я подразумевал, что вы будете выдавать определение проверок с сервера, и в моем примере я показал их как данные, уже находящиеся в области действия. Я оставляю читателю в качестве упражнения выяснить, как можно справиться с необходимостью извлечения этих данных из REST API (подсказка: отложенная компиляция).
СЦЕНАРИЙ 3: двусторонняя привязка данных по ссылке
Конечно, наиболее распространенное использование ссылки - просто подключить двустороннюю привязку данных через watch / apply. Большинство директив попадают в эту категорию, поэтому они адекватно рассматриваются в других местах.
