Przez kilka dni uderzam głową o ścianę i wydaje mi się, że lepiej wyjaśnić trochę więcej.
Zasadniczo, doktorzy wspominają, że separacja jest w dużej mierze poprawą wydajności. Chciałbym powtórzyć, że faza kompilacji jest używana głównie, gdy trzeba zmodyfikować DOM PRZED skompilowaniem samych podelementów.
Dla naszych celów podkreślę terminologię, która w innym przypadku jest myląca:
Usługa kompilatora (kompilacja $) jest mechanizmem kątowym, który przetwarza DOM i uruchamia różne bity kodu w dyrektywach.
FUNKCJA kompilacji to jeden fragment kodu w dyrektywie, który jest uruchamiany w określonym czasie przez USŁUGĘ kompilatora (kompilacja $).
Kilka uwag na temat kompilacji FUNKCJI:
Nie możesz modyfikować elementu ROOT (tego, na który wpływa twoja dyrektywa), ponieważ jest on już kompilowany z poziomu zewnętrznego DOM (kompilacja SERVICE już przeskanowała w poszukiwaniu dyrektyw dotyczących tego elementu).
Jeśli chcesz dodać inne dyrektywy do (zagnieżdżonych) elementów, możesz:
Muszę je dodać podczas fazy kompilacji.
Muszę wstrzyknąć usługę kompilacji do fazy łączenia i ręcznie skompilować elementy. ALE, uważaj na kompilację czegoś dwa razy!
Pomocne jest również sprawdzenie, jak działają zagnieżdżanie i jawne wywołania do kompilacji $, więc stworzyłem plac zabaw do oglądania na http://jsbin.com/imUPAMoV/1/edit . Zasadniczo rejestruje tylko kroki do pliku console.log.
Podam tutaj wyniki tego, co zobaczysz w tym koszu. W przypadku DOM dyrektyw niestandardowych tp i sp zagnieżdżone w następujący sposób:
<tp>
<sp>
</sp>
</tp>
Kompilacja kątowa SERVICE wywoła:
tp compile
sp compile
tp pre-link
sp pre-link
sp post-link
tp post-link
Kod jsbin ma również FUNKCJA post-link tp jawnie wywołuje usługę kompilacji SERVICE na trzeciej dyrektywie (w górę), która wykonuje wszystkie trzy kroki na końcu.
Teraz chcę przejść przez kilka scenariuszy, aby pokazać, jak można korzystać z kompilacji i łącza do robienia różnych rzeczy:
SCENARIUSZ 1: Dyrektywa jako MAKRO
Chcesz dynamicznie dodać dyrektywę (powiedzmy ng-show) do czegoś w swoim szablonie, które możesz uzyskać z atrybutu.
Załóżmy, że masz szablonUrl, który wskazuje na:
<div><span><input type="text"></span><div>
i chcesz niestandardowej dyrektywy:
<my-field model="state" name="address"></my-field>
co zmienia DOM w to:
<div><span ng-show="state.visible.address"><input ng-model="state.fields.address" ...>
w zasadzie chcesz zredukować płytę kotłową, mając pewną spójną strukturę modelu, którą twoja dyrektywa może interpretować. Innymi słowy: chcesz makro.
Jest to świetne zastosowanie w fazie kompilacji, ponieważ możesz oprzeć wszystkie manipulacje DOM na rzeczach, które znasz tylko z atrybutów. Wystarczy użyć jQuery, aby dodać atrybuty:
compile: function(tele, tattr) {
var span = jQuery(tele).find('span').first();
span.attr('ng-show', tattr.model + ".visible." + tattr.name);
...
return {
pre: function() { },
post: function() {}
};
}
Sekwencja operacji będzie (możesz to zobaczyć za pomocą jsbin wspomnianego wcześniej):
- Kompilacja SERVICE znajdzie moje pole
- Wywołuje funkcję kompilacji FUNCTION w dyrektywie, która aktualizuje DOM.
- Usługa kompilacji następnie przechodzi do wynikowego modelu DOM i KOMPILUJE (rekurencyjnie)
- Kompilowana usługa SERVICE następnie wywołuje odgałęzienie pre-link
- Kompilowana usługa SERVICE następnie wywołuje post-link BOTTOM UP, więc funkcja link my-field nazywa się PO połączeniu wewnętrznych węzłów.
W powyższym przykładzie nie jest wymagane łączenie, ponieważ cała praca dyrektywy została wykonana w kompilacji FUNKCJA.
W dowolnym momencie kod w dyrektywie może prosić o uruchomienie usługi kompilatora na dodatkowych elementach.
Oznacza to, że możemy zrobić dokładnie to samo w funkcji linku, jeśli wstrzykniesz usługę kompilacji:
directive('d', function($compile) {
return {
// REMEMBER, link is called AFTER nested elements have been compiled and linked!
link: function(scope, iele, iattr) {
var span = jQuery(iele).find('span').first();
span.attr('ng-show', iattr.model + ".visible." + iattr.name);
// CAREFUL! If span had directives on it before
// you will cause them to be processed again:
$compile(span)(scope);
}
});
Jeśli masz pewność, że elementy, które przekazujesz do $ compile SERVICE pierwotnie były wolne od dyrektyw (np. Pochodzą z szablonu, który zdefiniowałeś, lub właśnie utworzyłeś je za pomocą angular.element ()), to wynik końcowy jest prawie całkiem tak samo jak poprzednio (choć możesz powtarzać niektóre prace). Jeśli jednak element zawierał inne dyrektywy, spowodowałeś, że zostały one ponownie przetworzone, co może powodować różnego rodzaju nieprawidłowe zachowania (np. Podwójna rejestracja zdarzeń i zegarków).
Dlatego faza kompilacji jest znacznie lepszym wyborem do pracy w stylu makro.
SCENARIUSZ 2: Konfiguracja DOM za pomocą danych zakresu
Ten wynika z powyższego przykładu. Załóżmy, że potrzebujesz dostępu do zakresu podczas manipulacji DOM. W takim przypadku sekcja kompilacji jest dla ciebie bezużyteczna, ponieważ dzieje się to przed udostępnieniem zakresu.
Powiedzmy, że chcesz ulepszyć dane wejściowe za pomocą walidacji, ale chcesz wyeksportować swoje walidacje z klasy ORM po stronie serwera (DRY), i włączyć je automatycznie i wygenerować odpowiedni interfejs użytkownika po stronie tych walidacji.
Twój model może naciskać:
scope.metadata = {
validations: {
address: [ {
pattern: '^[0-9]',
message: "Address must begin with a number"
},
{ maxlength: 100,
message: "Address too long"
} ]
}
};
scope.state = {
address: '123 Fern Dr'
};
i możesz chcieć dyrektywy:
<form name="theForm">
<my-field model="state" metadata="metadata" name="address">
</form>
aby automatycznie dołączyć odpowiednie dyrektywy i div, aby pokazać różne błędy sprawdzania poprawności:
<form name="theForm">
<div>
<input ng-model="state.address" type="text">
<div ng-show="theForm.address.$error.pattern">Address must begin with a number</input>
...
W takim przypadku zdecydowanie potrzebujesz dostępu do zakresu (ponieważ tam są przechowywane twoje walidacje) i będziesz musiał ręcznie skompilować dodatki, ponownie uważając, aby nie kompilować podwójnie. (na marginesie, musisz ustawić nazwę w tagu zawierającym formularz (zakładam, że tutaj jest formularz) i możesz uzyskać do niego dostęp w połączeniu z iElement.parent (). controller ('form'). $ name) .
W takim przypadku nie ma sensu pisać funkcji kompilacji. Link jest naprawdę tym, czego chcesz. Kroki byłyby następujące:
- Zdefiniuj szablon całkowicie pozbawiony dyrektyw kątowych.
- Zdefiniuj funkcję łącza, która dodaje różne atrybuty
- USUŃ wszelkie dyrektywy kątowe, które możesz dopuścić do elementu najwyższego poziomu (dyrektywa my-field). Zostały już przetworzone i jest to sposób na uniknięcie podwójnego przetwarzania.
- Zakończ, wywołując kompilację SERVICE na elemencie najwyższego poziomu
Tak jak:
angular.module('app', []).
directive('my-field', function($compile) {
return {
link: function(scope, iele, iattr) {
// jquery additions via attr()
// remove ng attr from top-level iele (to avoid duplicate processing)
$compile(iele)(scope); // will pick up additions
}
};
});
Można oczywiście skompilować zagnieżdżone elementy jeden po drugim, aby uniknąć konieczności martwienia się o powielone przetwarzanie dyrektyw ng podczas ponownej kompilacji elementu najwyższego poziomu.
Ostatnia uwaga na temat tego scenariusza: zasugerowałem, że prześlesz definicję walidacji z serwera, aw moim przykładzie pokazałem je jako dane już w zakresie. Zostawiam to jako ćwiczenie dla czytelnika, aby dowiedzieć się, jak sobie poradzić z koniecznością pobierania tych danych z interfejsu API REST (wskazówka: odroczona kompilacja).
SCENARIUSZ 3: dwukierunkowe wiązanie danych przez łącze
Oczywiście najczęstszym zastosowaniem linku jest po prostu połączenie dwukierunkowego powiązania danych poprzez obejrzenie / zastosowanie. Większość dyrektyw zalicza się do tej kategorii, więc jest ona odpowiednio uwzględniona w innym miejscu.
