Angular JS: Зачем нужна функция связи директивы, когда у нас уже был контроллер директивы с областью действия?

Мне нужно выполнить некоторые операции над областью действия и шаблоном. Кажется, что я могу сделать это либо в linkфункции, либо в controllerфункции (поскольку оба имеют доступ к области действия).

В каком случае я должен использовать linkфункцию, а не контроллер?

angular.module('myApp').directive('abc', function($timeout) {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        scope: true,
        link: function(scope, elem, attr) { /* link function */ },
        controller: function($scope, $element) { /* controller function */ }
    };
}

Также я понимаю, что linkэто не угловой мир. Таким образом, я могу использовать $watch, $digestи $apply.

Какое значение имеет linkфункция, когда у нас уже был контроллер?

После моей первоначальной борьбы с linkи controllerфункциями и чтения довольно много о них, я думаю , что теперь у меня есть ответ.

Сначала давайте поймем ,

Как угловые директивы работают в двух словах:

• Мы начинаем с шаблона (в виде строки или загружается в строку)

  var templateString = '<div my-directive>{{5 + 10}}</div>';

• Теперь это templateStringзавернуто как угловой элемент

  var el = angular.element(templateString);

• С el, теперь мы скомпилируем его, $compileчтобы вернуть функцию ссылки .

  var l = $compile(el)

  Вот что происходит,

  • $compile проходит через весь шаблон и собирает все директивы, которые он распознает.
  • Все обнаруженные директивы рекурсивно компилируются, а их linkфункции собираются.
  • Затем все linkфункции оборачиваются в новую linkфункцию и возвращаются как l.

• Наконец, мы предоставляем scopeфункцию этой функции l(link), которая дополнительно выполняет функции обернутой ссылки с этим scopeи их соответствующими элементами.

  l(scope)

• Это добавляет templateновый узел к DOMи вызывает, controllerкоторый добавляет его часы в область, которая используется совместно с шаблоном в DOM.

Сравнение компиляции против линии против контроллера :

• Каждая директива компилируется только один раз, и функция связи сохраняется для повторного использования. Следовательно, если что-то применимо ко всем экземплярам директивы, ее следует выполнять внутри compileфункции директивы .

• Теперь после компиляции у нас есть linkфункция, которая выполняется при подключении шаблона к DOM . Поэтому мы выполняем все, что является специфическим для каждого экземпляра директивы. Например: прикрепление событий , изменение шаблона в зависимости от области видимости и т. Д.

• Наконец, контроллер должен быть доступен для работы и реагирования, в то время как директива работает надDOM (после присоединения). Следовательно:

  (1) После настройки просмотра [ V ] (т.е. шаблон) со ссылкой. $scopeнаш [ M ] и $controllerнаш [ C ] в MVC

  (2) Воспользуйтесь двухсторонним связыванием с $ scope , настроив часы.

  (3) $scopeОжидается, что часы будут добавлены в контроллер, поскольку именно это отслеживает шаблон во время выполнения.

  (4) Наконец, controllerтакже используется для связи между соответствующими директивами. (Как myTabsпример в https://docs.angularjs.org/guide/directive )

  (5) Это правда, что мы могли бы сделать все это и в linkфункции, но это касается разделения интересов .

Поэтому, наконец, у нас есть следующее, которое идеально подходит для всех частей:

Зачем нужны контроллеры

Разница между linkиcontroller вступает в игру, когда вы хотите вложить директивы в DOM и представить функции API из родительской директивы для вложенных.

Из документов :

Рекомендация: используйте контроллер, если вы хотите представить API другим директивам. В противном случае используйте ссылку.

Допустим , вы хотите иметь две директивы my-formи , my-text-inputи вы хотите my-text-inputдирективы появляться только внутриmy-form и больше нигде.

В этом случае, вы будете говорить при определении директивы , my-text-inputчто она требует контроллера от parentэлемента DOM с использованием требует аргумента, например: require: '^myForm'. Теперь контроллер из родительского элемента будет injectedв linkфункции в качестве четвертого аргумента, следующего $scope, element, attributes. Вы можете вызывать функции на этом контроллере и взаимодействовать с родительской директивой.

Более того, если такой контроллер не найден, возникнет ошибка.

Зачем вообще использовать ссылку

Нет реальной необходимости использовать linkфункцию, если вы определяете, controllerпоскольку $scopeона доступна в controller. Более того, при определении обоих linkи controllerнужно соблюдать осторожность в отношении порядка вызова двух ( controllerвыполняется раньше).

Однако, в соответствии с Angular-способом , большинство DOM-манипуляций и двухстороннего связывания $watchersобычно выполняются в linkфункции, а API для дочерних и $scopeманипуляций - в controller. Это не сложное и быстрое правило, но это сделает код более модульным и поможет разделить задачи (контроллер будет поддерживать directiveсостояние, а linkфункция будет поддерживать DOMвнешние + привязки).

controllerФункция / объект представляет собой абстракцию модель-представление-контроллер (MVC). Хотя нет ничего нового, что можно написать о MVC, это все же самое значительное преимущество angular: разделить проблемы на более мелкие части. И это все, не более того, так что если вам нужно реагировать на Modelизменения, поступающие от человека, Viewто Controllerэто тот человек, который должен выполнять эту работу.

История о linkфункции отличается, она идет с другой точки зрения, чем MVC. И это действительно важно, когда мы хотим пересечь границы controller/model/view (шаблона) .

Давайте начнем с параметров, которые передаются в linkфункцию:

function link(scope, element, attrs) {

• область действия - это угловой объект области видимости.
• element - это элемент jqLite-wrapped, которому соответствует эта директива.
• attrs - это объект с нормализованными именами атрибутов и их соответствующими значениями.

Чтобы поместить linkв контекст, мы должны упомянуть, что все директивы проходят через эти шаги процесса инициализации: Compile , Link . Выдержка из книги Брэда Грина и Шьяма Сешадри Angular JS :

Фаза компиляции (родственная ссылка, давайте упомянем ее здесь, чтобы получить ясную картину):

На этом этапе Angular обходит DOM, чтобы определить все зарегистрированные директивы в шаблоне. Затем для каждой директивы она преобразует DOM на основе правил директивы (template, replace, transclude и т. Д.) И вызывает функцию compile, если она существует. Результатом является скомпилированная функция шаблона,

Фаза связи :

Чтобы сделать представление динамическим, Angular затем запускает функцию связи для каждой директивы. Функции связи обычно создают прослушиватели в DOM или модели. Эти слушатели постоянно синхронизируют вид и модель.

Хороший пример того, как использовать link можно найти здесь: Создание пользовательских директив . См. Пример: создание директивы, управляющей DOM , которая вставляет «дату-время» в страницу, обновляемую каждую секунду.

Просто очень короткий фрагмент из этого богатого источника выше, демонстрирующий реальные манипуляции с DOM. Функция $ timeout подключена, а также очищается при вызове деструктора, чтобы избежать утечек памяти

.directive('myCurrentTime', function($timeout, dateFilter) {

 function link(scope, element, attrs) {

 ...

 // the not MVC job must be done
 function updateTime() {
   element.text(dateFilter(new Date(), format)); // here we are manipulating the DOM
 }

 function scheduleUpdate() {
   // save the timeoutId for canceling
   timeoutId = $timeout(function() {
     updateTime(); // update DOM
     scheduleUpdate(); // schedule the next update
   }, 1000);
 }

 element.on('$destroy', function() {
   $timeout.cancel(timeoutId);
 });

 ...