Różnica między funkcjami „kontrolera”, „łącza” i „kompilacji” podczas definiowania dyrektywy

Niektóre miejsca wydają się używać funkcji kontrolera do logiki dyrektywy, a inne używają linku. Przykład tabs na kątowej stronie głównej używa kontrolera dla jednej i linku do innej dyrektywy. Jaka jest różnica między nimi?

Rozbuduję trochę twoje pytanie i uwzględnię również funkcję kompilacji.

• funkcja kompilacji - służy do manipulacji szablonem DOM (tj. manipulacji elementem tElement = element szablonu), a zatem do manipulacji, które mają zastosowanie do wszystkich klonów DOM szablonu powiązanych z dyrektywą. (Jeśli potrzebujesz także funkcji łącza (lub funkcji łącza poprzedzającego i post), a zdefiniowałeś funkcję kompilacji, funkcja kompilacji musi zwrócić funkcje link, ponieważ 'link'atrybut jest ignorowany, jeśli 'compile'atrybut jest zdefiniowany.)

• funkcja link - zwykle używana do rejestrowania wywołań zwrotnych odbiornika (tj. $watchwyrażeń w zakresie), a także do aktualizacji DOM (tj. manipulowanie iElement = indywidualny element instancji). Jest wykonywany po sklonowaniu szablonu. Np. Wewnątrz an <li ng-repeat...>, funkcja link jest wykonywana po <li>sklonowaniu szablonu (tElement) (do iElement) dla tego konkretnego <li>elementu. A $watchpozwala na powiadamianie dyrektywy o zmianach właściwości zasięgu (zakres jest powiązany z każdą instancją), co pozwala dyrektywie renderować zaktualizowaną wartość instancji do DOM.

• funkcja kontrolera - musi być używana, gdy inna dyrektywa wymaga interakcji z tą dyrektywą. Na przykład na stronie głównej AngularJS dyrektywa panelu musi dodać się do zakresu obsługiwanego przez dyrektywę tabs, stąd dyrektywa tabs musi zdefiniować metodę kontrolera (think API), do której dyrektywa panelu może uzyskać dostęp / wywołać.
  
  Aby uzyskać bardziej szczegółowe wyjaśnienie dyrektyw tabs i panel oraz dlaczego dyrektywa tabs tworzy funkcję na swoim kontrolerze przy użyciu this(a nie on $scope), zobacz 'this' vs $ scope w kontrolerach AngularJS .

Zasadniczo można umieszczać metody $watchesitp. W kontrolerze lub funkcji łącza dyrektywy. Sterownik uruchomi się jako pierwszy, co czasem ma znaczenie (zobacz to skrzypce, które loguje się, gdy funkcje ctrl i link działają z dwiema zagnieżdżonymi dyrektywami). Jak Josh wspomniał w komentarzu , możesz chcieć umieścić funkcje manipulowania zasięgiem wewnątrz kontrolera tylko dla zachowania spójności z resztą frameworka.

Jako uzupełnienie odpowiedzi Marka, funkcja kompilacji nie ma dostępu do zakresu, ale funkcja łącza ma.

Naprawdę polecam ten film; Pisanie dyrektyw Misko Hevery'ego (ojca AngularJS), w którym opisuje różnice i niektóre techniki. (Różnica między funkcją kompilacji a funkcją linku o 14:41 na filmie ).

1. uruchamianie kodu przed kompilacją: użyj kontrolera
2. uruchamianie kodu po kompilacji: użyj łącza

Konwencja kątowa: zapisz logikę biznesową w kontrolerze i manipulację DOM w łączu.

Oprócz tego możesz wywołać jedną funkcję kontrolera z funkcji link innej dyrektywy. Na przykład masz 3 niestandardowe dyrektywy

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

i chcesz uzyskać dostęp do zwierząt z wnętrza dyrektywy „lamparta”.

http://egghead.io/lessons/angularjs-directive-communication będzie pomocne, aby wiedzieć o komunikacji między dyrektywami

funkcja kompilacji -

1. jest wywoływany przed kontrolerem i funkcją link.
2. W funkcji kompilacji masz oryginalny szablon DOM, dzięki czemu możesz dokonywać zmian w oryginalnym DOM, zanim AngularJS utworzy jego instancję i zanim zostanie utworzony zakres
3. ng-repeat jest doskonałym przykładem - oryginalna składnia to element szablonu, powtarzane elementy w HTML są instancjami
4. Może istnieć wiele instancji elementu i tylko jeden element szablonu
5. Zakres nie jest jeszcze dostępny
6. Funkcja kompilacji może zwrócić funkcję i obiekt
7. zwracanie funkcji (post-link) - jest równoważne z rejestracją funkcji łączenia za pomocą właściwości link obiektu config, gdy funkcja kompilacji jest pusta.
8. zwracanie obiektu z funkcją (funkcjami) zarejestrowanymi za pomocą właściwości przed i po - pozwala kontrolować, kiedy funkcja łączenia powinna być wywoływana w fazie łączenia. Zobacz informacje o funkcjach wstępnego i późniejszego łączenia poniżej.

składnia

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

kontroler

1. wywoływany po funkcji kompilacji
2. zakres jest dostępny tutaj
3. mogą być dostępne przez inne dyrektywy (patrz atrybut wymagany)

link wstępny

1. Funkcja link odpowiada za rejestrację detektorów DOM oraz aktualizację DOM. Jest wykonywany po sklonowaniu szablonu. W tym miejscu zostanie umieszczona większość logiki dyrektywy.

2. Możesz zaktualizować dom w kontrolerze za pomocą angular.element, ale nie jest to zalecane, ponieważ element jest dostępny w funkcji link

3. Funkcja wstępnego łączenia służy do implementacji logiki, która działa, gdy kątowy js skompilował już elementy potomne, ale zanim został wywołany jakikolwiek post link elementu potomnego

link do strony

1. Dyrektywa, która ma tylko funkcję link, angular traktuje tę funkcję jak link do posta

2. post zostanie wykonany po funkcji kompilacji, kontrolera i linku wstępnego, dlatego jest to uważane za najbezpieczniejsze i domyślne miejsce na dodanie logiki dyrektywy