Різниця між функціями "контролер", "посилання" та "компілювати" при визначенні директиви

Деякі місця, здається, використовують функцію контролера для логіки директиви, а інші використовують посилання. У прикладі вкладок на домашній сторінці кутових використовується контролер для однієї та посилання для іншої директиви. Яка різниця між ними?

Я збираюся трохи розгорнути ваше запитання, а також включити функцію компіляції.

• функція компіляції - використання для маніпуляції з DOM шаблону (тобто маніпулювання tElement = елемент шаблону), отже, маніпуляції, які застосовуються до всіх клонів DOM шаблону, пов'язаних з директивою. (Якщо вам також потрібна функція посилання (або функції до і після посилання), і ви визначили функцію компіляції, функція компіляції повинна повернути функцію (-и) зв’язку, оскільки 'link'атрибут ігнорується, якщо 'compile'атрибут визначений.)

• функція зв'язку - зазвичай використовується для реєстрації зворотних викликів слухачів (тобто $watchвиразів на області), а також оновлення DOM (тобто, маніпулювання iElement = окремий елемент екземпляра). Він виконується після клонування шаблону. Наприклад, всередині <li ng-repeat...>, функція зв’язку виконується після того, як <li>шаблон (tElement) був клонований (в iElement) для цього конкретного <li>елемента. A $watchдозволяє директиві повідомляти про зміни властивостей діапазону (область застосування пов'язана з кожним екземпляром), що дозволяє директиві надавати оновлене значення екземпляра DOM.

• функція контролера - повинна використовуватися, коли інша директива потребує взаємодії з цією директивою. Наприклад, на домашній сторінці AngularJS директива панелі повинна додати себе до області, що підтримується директивою вкладок, отже, директива вкладок повинна визначити метод контролера (API API), до якого директива панелі може отримати доступ / викликати.
  
  Щоб отримати більш поглиблене пояснення директив вкладок і панелей, а також чому директива вкладок створює функцію на своєму контролері за допомогою this(а не на $scope), дивіться "this" vs $ range в контролерах AngularJS .

Як правило, ви можете розмістити методи $watchesтощо в контролер директиви або у функцію зв'язку. Контролер запуститься першим, що іноді має значення (див. Цю скрипку, яка реєструється, коли функції ctrl та link запускаються з двома вкладеними директивами). Як згадував Джош у коментарі , ви можете покласти функції маніпулювання сферою всередині контролера лише для узгодження з рештою фреймворку.

Як доповнення до відповіді Марка, функція компіляції не має доступу до області застосування, але функція посилання робить.

Я дуже рекомендую це відео; Написання директив Місько Гевери (батько AngularJS), де він описує відмінності та деякі прийоми. (Різниця між функцією компіляції та функцією посилання на позначці 14:41 у відео ).

1. запущений код перед компіляцією: використовуйте контролер
2. запущений код після компіляції: використовуйте Посилання

Кутова умова: запишіть ділову логіку в контролер і DOM маніпулювання посиланням.

Крім цього, ви можете викликати одну функцію контролера з функції зв’язку іншої директиви. Наприклад, у вас є 3 власні директиви

<animal>
<panther>
<leopard></leopard>
</panther> 
</animal>

і ви хочете отримати доступ до тварини зсередини директиви "леопарда".

http://egghead.io/lessons/angularjs-directive-зв'язок буде корисним дізнатися про міждирективні комунікації

функція компіляції -

1. викликається перед функцією контролера та зв'язку.
2. У функції компіляції у вас є оригінальний шаблон DOM, щоб ви могли вносити зміни до оригінального DOM до того, як AngularJS створить його примірник і перед тим, як буде створено область застосування
3. ng-repe є ідеальним прикладом - оригінальний синтаксис - це шаблон шаблону, повторювані елементи в HTML - це екземпляри
4. Може бути декілька примірників елементів і лише один елемент шаблону
5. Область застосування ще не доступна
6. Функція компіляції може повернути функцію та об'єкт
7. повернення функції (пост-посилання) - еквівалентно реєстрації функції зв’язку через властивість зв'язку об’єкта конфігурації, коли функція компіляції порожня.
8. повернення об'єкта з функціями (іми), зареєстрованими за допомогою властивостей до та після - дозволяє контролювати, коли функцію зв’язування слід викликати під час фази зв’язування. Інформацію про функції попереднього зв’язування та після зв’язування див. Нижче.

синтаксис

function compile(tElement, tAttrs, transclude) { ... }

контролер

1. викликається після функції компіляції
2. тут доступний обсяг
3. можна отримати доступ до інших директив (див. атрибут вимагати)

попереднє посилання

1. Функція посилання відповідає за реєстрацію слухачів DOM, а також за оновлення DOM. Він виконується після клонування шаблону. Саме тут буде вкладена більшість логіки директиви.

2. Можна оновити dom в контролері за допомогою angular.element, але це не рекомендується, оскільки елемент передбачений у функції посилання

3. Функція попереднього посилання використовується для реалізації логіки, яка запускається, коли угловий js вже компілював дочірні елементи, але перед тим, як було викликано будь-яке дочірнє поштове посилання

пост-посилання

1. Директива, яка має лише функцію посилання, angular розглядає функцію як посилання

2. повідомлення буде виконуватися після компіляції, контролера та функції попереднього посилання, тому саме це вважається найбезпечнішим і за замовчуванням місцем для додавання вашої логіки директиви