Когда мы будем использовать `preLink` функцию компиляции директивы?

Функция compile директивы angularjs 'имеет две функции: preLink и postLink.

Функция предварительной привязки

Выполняется до привязки дочерних элементов. Небезопасно выполнять преобразование DOM, так как функция связывания компилятора не сможет найти правильные элементы для компоновки.

Функция постсвязывания

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

Он говорит, что мы не должны делать в preLink, интересно, что и когда следует использовать preLink? В течение большей части времени я использовал postLink. Есть ли какой-нибудь случай, который мы должны использовать?

Ответ 1

Вам почти никогда не нужно использовать preLink. Жизненно важные случаи для этого - когда вам нужно манипулировать данными в области, , но не DOM, перед функциями link (также из других директив).

Как прокомментировал jacob, вы всегда можете сделать это и с контроллера, но иногда более уместно иметь код в самой директиве.

Существует отличная статья о том, как работают директивы, где порядок ссылок хорошо объясняется: http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/

Если вам нужен хороший пример того, почему иногда требуется предварительная компоновка, я рекомендую вам ознакомиться с самими директивами angular. Например https://github.com/angular/angular.js/blob/master/src/ng/directive/ngModel.js

Ответ 2

Функция A preLink используется, когда директива хочет поместить что-то в область shared, чтобы она была готова к использованию другими директивами в своих функциях postLink.

Директива формы

Angular, например, создает объект, содержащий записи для всех входов. Пользовательская директива может безопасно обращаться к этому объекту в функции postLink.

Ответ 3

Мне пришлось использовать preLink при создании настраиваемых директив, которые включают другие директивы. В моем случае моя директива включала шаблон, который применял директиву Angular UI Bootstrap Typeahead к некоторым его элементам и использовал свои собственные переменные области видимости для инициализации функций Typeahead.

Например:

...
template:
    "<select ng-show='dropdown' class='form-control' ng-model='ngModel' ng-options= for s in suggestions'></select>"
    + "<textarea ng-show='!dropdown' class='form-control' ng-model='ngModel' typeahead= for s in suggestions |filter:$viewValue' typeahead-min-length='0' typeahead-editable='{{editable}}'></textarea>",
...

В этом случае Angular связывает дочерние директивы перед родителем, поэтому мне нужно было использовать preLink для настройки typeahead. Когда я инициализировал переменные $scope.dropdown и $scope.editable в директиве postLink, я обнаружил, что они не инициализировались, когда директивы typeahead были связаны, и мне пришлось переместить их инициализацию в preLink, чтобы эта директива работала правильно.