Ho battuto la testa contro il muro su questo per un paio di giorni e sento che un po 'più di spiegazione è in ordine.
Fondamentalmente, i documenti menzionano che la separazione è in gran parte un miglioramento delle prestazioni. Ribadisco che la fase di compilazione viene utilizzata principalmente quando è necessario modificare il DOM PRIMA che vengano compilati gli elementi secondari stessi.
Per i nostri scopi, sottolineerò la terminologia, che altrimenti confonde:
Il servizio di compilazione SERVICE ($ compile) è il meccanismo angolare che elabora il DOM ed esegue i vari bit di codice nelle direttive.
La FUNZIONE di compilazione è un bit di codice all'interno di una direttiva, che viene eseguita in un determinato momento dal compilatore SERVICE ($ compile).
Alcune note sulla compilazione FUNZIONE:
Non puoi modificare l'elemento ROOT (quello interessato dalla tua direttiva), poiché è già in fase di compilazione dal livello esterno di DOM (il servizio di compilazione ha già scansionato le direttive su quell'elemento).
Se vuoi aggiungere altre direttive agli elementi (nidificati), puoi:
Devi aggiungerli durante la fase di compilazione.
Devono iniettare il servizio di compilazione nella fase di collegamento e compilare manualmente gli elementi. MA, attenzione a compilare qualcosa due volte!
È anche utile vedere come funzionano l'annidamento e le chiamate esplicite a $ compilate, quindi ho creato un parco giochi per visualizzarlo su http://jsbin.com/imUPAMoV/1/edit . Fondamentalmente, registra solo i passaggi su console.log.
Dichiarerò qui i risultati di ciò che vedresti nel cestino. Per un DOM di direttive personalizzate tp e sp nidificate come segue:
<tp>
<sp>
</sp>
</tp>
La compilazione angolare SERVICE chiamerà:
tp compile
sp compile
tp pre-link
sp pre-link
sp post-link
tp post-link
Il codice jsbin ha anche la FUNZIONE post-link di tp che chiama esplicitamente il servizio di compilazione su una terza direttiva (su), che alla fine esegue tutti e tre i passaggi.
Ora, voglio passare attraverso un paio di scenari per mostrare come si potrebbe fare usando la compilazione e il collegamento per fare varie cose:
SCENARIO 1: Direttiva come MACRO
Volete aggiungere una direttiva (diciamo ng-show) in modo dinamico a qualcosa nel vostro modello che potete derivare da un attributo.
Supponi di avere un templateUrl che punta a:
<div><span><input type="text"></span><div>
e vuoi una direttiva personalizzata:
<my-field model="state" name="address"></my-field>
che trasforma il DOM in questo:
<div><span ng-show="state.visible.address"><input ng-model="state.fields.address" ...>
fondamentalmente, si desidera ridurre il boilerplate avendo una struttura di modello coerente che la direttiva può interpretare. In altre parole: vuoi una macro.
Questo è di grande utilità per la fase di compilazione, poiché puoi basare tutte le manipolazioni del DOM su cose che conosci solo dagli attributi. Usa semplicemente jQuery per aggiungere gli attributi:
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() {}
};
}
La sequenza delle operazioni sarà (puoi vederla tramite la jsbin menzionata in precedenza):
- Il servizio di compilazione trova my-field
- Chiama la compilazione FUNCTION sulla direttiva, che aggiorna il DOM.
- Il servizio di compilazione quindi entra nel DOM risultante e COMPILES (ricorsivamente)
- Il servizio di compilazione quindi chiama pre-link top-down
- Il servizio di compilazione quindi chiama post-link BOTTOM UP, quindi la funzione di collegamento di my-field è chiamata DOPO che i nodi interni sono stati collegati.
Nell'esempio sopra, non è necessario alcun collegamento, poiché tutto il lavoro della direttiva è stato svolto nella compilazione FUNCTION.
In qualsiasi momento, il codice in una direttiva può richiedere l'esecuzione del compilatore SERVICE su elementi aggiuntivi.
Ciò significa che possiamo fare esattamente la stessa cosa in una funzione di collegamento se si inietta il servizio di compilazione:
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);
}
});
Se sei sicuro che gli elementi che stai passando a $ compilano SERVICE inizialmente erano privi di direttiva (ad es. Provenivano da un modello che hai definito, o li hai appena creati con angular.element ()), il risultato finale è praticamente lo stesso di prima (anche se potresti ripetere qualche lavoro). Tuttavia, se l'elemento aveva altre direttive su di esso, le hai semplicemente fatte elaborare di nuovo, il che può causare ogni tipo di comportamento irregolare (ad es. Doppia registrazione di eventi e orologi).
Pertanto, la fase di compilazione è una scelta molto migliore per il lavoro in stile macro.
SCENARIO 2: configurazione DOM tramite dati dell'ambito
Questo segue l'esempio sopra. Supponiamo che tu abbia bisogno di accedere all'ambito mentre manipoli il DOM. Bene, in tal caso, la sezione di compilazione è inutile per te, poiché accade prima che un ambito sia disponibile.
Quindi, supponiamo che tu voglia eliminare un input con convalide, ma desideri esportare le convalide da una classe ORM (DRY) sul lato server e farle applicare automaticamente e generare l'interfaccia utente sul lato client appropriata per tali convalide.
Il tuo modello potrebbe spingere:
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'
};
e potresti volere una direttiva:
<form name="theForm">
<my-field model="state" metadata="metadata" name="address">
</form>
per includere automaticamente le direttive e i div corretti per mostrare i vari errori di convalida:
<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>
...
In questo caso hai sicuramente bisogno dell'accesso all'ambito (poiché è lì che sono archiviate le tue convalide) e dovrai compilare le aggiunte manualmente, facendo di nuovo attenzione a non compilare due volte le cose. (come nota a margine, dovresti impostare un nome sul tag del modulo contenente (presumo qui il Form), e potresti accedervi in collegamento con iElement.parent (). controller ('form'). $ name) .
In questo caso non ha senso scrivere una funzione di compilazione. Link è davvero quello che vuoi. I passaggi sarebbero:
- Definire un modello completamente privo di direttive angolari.
- Definire una funzione di collegamento che aggiunge i vari attributi
- RIMUOVI qualsiasi direttiva angolare che potresti consentire sul tuo elemento di primo livello (la direttiva my-field). Sono già stati elaborati e questo è un modo per impedire che vengano elaborati due volte.
- Termina chiamando il servizio di compilazione sul tuo elemento di livello superiore
Così:
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
}
};
});
È possibile, ovviamente, compilare gli elementi nidificati uno per uno per evitare di doversi preoccupare dell'elaborazione duplicata delle direttive ng quando si compila nuovamente l'elemento di livello superiore.
Un'ultima nota su questo scenario: ho insinuato che avresti spinto la definizione delle convalide da un server e nel mio esempio le ho mostrate come dati già nell'ambito. Lascio che sia un esercizio per il lettore capire come si potrebbe affrontare la necessità di estrarre quei dati da un'API REST (suggerimento: compilazione differita).
SCENARIO 3: associazione dati bidirezionale via link
Naturalmente l'uso più comune del collegamento è semplicemente quello di collegare l'associazione dati bidirezionale tramite watch / apply. La maggior parte delle direttive rientrano in questa categoria, quindi è adeguatamente coperta altrove.
