O que mais acontece entre essas chamadas de função?
As várias funções directiva são executados a partir de dentro de duas outras funções angulares chamados $compile
(onde a directiva da compile
for executado) e uma função de chamada interno nodeLinkFn
(onde o da directiva controller
, preLink
e postLink
são executadas). Várias coisas acontecem dentro da função angular antes e depois das funções diretivas serem chamadas. Talvez o mais notável seja a recursão infantil. A ilustração simplificada a seguir mostra as principais etapas nas fases de compilação e link:
Para demonstrar essas etapas, vamos usar a seguinte marcação HTML:
<div ng-repeat="i in [0,1,2]">
<my-element>
<div>Inner content</div>
</my-element>
</div>
Com a seguinte diretiva:
myApp.directive( 'myElement', function() {
return {
restrict: 'EA',
transclude: true,
template: '<div>{{label}}<div ng-transclude></div></div>'
}
});
Compilar
A compile
API tem a seguinte aparência:
compile: function compile( tElement, tAttributes ) { ... }
Geralmente, os parâmetros são prefixados com t
para significar que os elementos e atributos fornecidos são os do modelo de origem, e não os da instância.
Antes da chamada para o compile
conteúdo transcluído (se houver), é removido e o modelo é aplicado à marcação. Assim, o elemento fornecido para a compile
função terá a seguinte aparência:
<my-element>
<div>
"{{label}}"
<div ng-transclude></div>
</div>
</my-element>
Observe que o conteúdo transcluído não é reinserido neste momento.
Após a chamada para a diretiva de .compile
, o Angular percorrerá todos os elementos filhos, incluindo aqueles que podem ter sido introduzidos pela diretiva (os elementos do modelo, por exemplo).
Criação de Instância
No nosso caso, três instâncias do modelo de origem acima serão criadas (por ng-repeat
). Portanto, a sequência a seguir será executada três vezes, uma vez por instância.
Controlador
A controller
API envolve:
controller: function( $scope, $element, $attrs, $transclude ) { ... }
Entrando na fase de link, a função de link retornada via $compile
agora é fornecida com um escopo.
Primeiro, a função de link cria um escopo filho ( scope: true
) ou um escopo isolado ( scope: {...}
), se solicitado.
O controlador é então executado, fornecido com o escopo do elemento de instância.
Pré-link
A pre-link
API tem a seguinte aparência:
function preLink( scope, element, attributes, controller ) { ... }
Praticamente nada acontece entre a chamada para a diretiva .controller
e a.preLink
função. A Angular ainda fornece recomendações sobre como cada uma deve ser usada.
Seguindo o .preLink
chamada, a função de link percorrerá cada elemento filho - chamando a função de link correta e anexando a ele o escopo atual (que serve como o escopo pai dos elementos filhos).
Post-link
A post-link
API é semelhante à da pre-link
função:
function postLink( scope, element, attributes, controller ) { ... }
Talvez valha a pena notar que, uma vez .postLink
chamada a função de uma diretiva , o processo de vinculação de todos os seus elementos filhos foi concluído, incluindo todas as .postLink
funções das crianças .
Isso significa que, quando o tempo .postLink
é chamado, as crianças estão 'vivas' e estão prontas. Isso inclui:
- ligação de dados
- transclusão aplicada
- escopo anexado
O modelo nesse estágio ficará assim:
<my-element>
<div class="ng-binding">
"{{label}}"
<div ng-transclude>
<div class="ng-scope">Inner content</div>
</div>
</div>
</my-element>