Директивы AngularJS: функции Link and Compile предназначены для совместной работы?

У меня есть несколько сомнений по поводу этих функций.

Предположим, что у меня есть эта директива:

.directive('hello', function () {
    return {
      template: '<div>Hello <span ng-transclude></span></div>',
      restrict: 'E',
      transclude: true,
      compile: function() {
        console.log('Compile()');

        return {
          pre: function() {
            console.log('PreLink()');
          },
          post: function() {
            console.log('PostLink()');
          }
        };
      },
      link: function postLink(scope, element, attrs) {
        console.log('Link()');
      }
    };
  }

И я добавляю его в свой шаблон как:

<hello>World</hello>

Журналы консоли:

Compile()
PreLink()
PostLink()

Итак, почему не вызывается link()?

Если вместо возврата объекта из compile() я возвращаю одну функцию, печатающую PreLink() журналы консоли:

Compile()
PreLink()

Если я не верну ничего из compile() журналов консоли:

Compile()

Тем не менее link() не вызывается.

Если я просто прокомментирую compile(), тогда link() будет окончательно напечатан:

Link()

Может кто-нибудь объяснить все это? Являются ли link() и compile() совместными усилиями? Должен ли я просто использовать компиляцию PreLink() и PostLink()?

Ответы

Ответ 1

link и compile не работают вместе, нет.

В объекте определения директивы, если вы только определите link, это как сокращение для наличия пустой функции compile с пустой функцией preLink с вашим кодом в postLink функция. Как только вы определяете compile, link игнорируется angular, потому что компиляция должна возвращать функции связывания.

Если вы возвращаете только одну функцию из compile, тогда она будет выполнена как ссылка post.

Или, иначе, link является просто ярлыком для функции postLink, которая вызывается после того, как область была связана с помощью compile.

Здесь (вид) документа здесь - посмотрите комментарии в примере кода.

Ответ 2

Пару дней назад Юрген Ван де Моер опубликовал прекрасную статью о тщательности функций компиляции и компоновки в директивах AngularJS. Он довольно четко объясняет обязанности и последовательность функций compile, pre-link и post-link.

_{(источник: jvandemo.com)}

Вы обязательно должны проверить это: http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives