Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Директивы – разница между compile, controller и link – AngularJS Directive

Одна из сложностей в работе с директивами в ангуларе заключается в том, что они обладают достаточно большим и гибким набором настроек. Такое количество рычагов управления по-началу приводит в ступор и замешательство. С чего начать? Какой метод применить в каком случае, особенно если они вроде как дают один и тот же результат на выходе.

Для работы с логикой директивы у нас есть аж три функции: compile, controller и link (причем последняя это частный случай compile, но об этом позже) – какую из них когда применять по-началу остается загадкой. В первую очередь давайте разберемся в какой последовательности они вызываются.

Как я уже упомянул функция link является частным случаем compile, поэтому их нельзя использовать одновременно. никакой ошибки ангулар выкидывать не будет, однако он просто не будет использовать код прописанный в функции link, если в той же директиве ему так же передается и compile. Это стоит принимать вол внимание при работе :] Давайте для начала посмотрим в какой последовательности вызываются эти функции. Для этого воспользуемся следующим кодом:

А вот и html:

После запуска мы увидим следующую картину:

See the Pen Directives – order of compile and controller by Artem Demo (@artemdemo) on CodePen.

Таким образом можно сделать следующий вывод о порядке вызова функций compile, controller и link:

1. В первую очередь ангулар вызывает controller, который получает доступ к пока еще “виртуальному” элементу, который в последствии будет добавлен в DOM

2. После этого вызывает compile pre-link. Элемент уже добавлен в DOM, при этом scope, который доступен на этой стадии является тем же $scope, который был инициализирован на стадии контроллера. Однако, еще не был активирован функционал transclude (об этом чуть ниже)

3. На последнем этапе вызывается compile post-link. Второй вариант вызова этой функии является просто через link, именно по-этому нельзя его использовать вместе с compile. Эта функция вызывается после transclude.

Теперь давайте разберемся что же такое transclude. Не смотря на достаточно суровое название смысл этого функционала достаточно просто усвоить. Transclude устанавливает порядок использования переменных с приоритетом у родительского скопа. Иными словами, если в родительском скопе и в директиве объявлена переменная с одним и тем же именем, то transclude обяжет директиву взять переменную из родительского скопа.

Ссылки по тему:
http://odetocode.com/blogs/scott/archive/2014/05/28/compile-pre-and-post-linking-in-angularjs.aspx
http://jasonmore.net/angular-js-directives-difference-controller-link/

Поделиться:
comments powered by Disqus