Com o rápido crescimento do JavaScript como um pilha completa linguagem, mais e mais aplicativos estão utilizando estruturas que permitem que o navegador da web manipule mais o processamento da IU, como vinculação de dados, gerenciamento de visualizações de dados, transformação de dados e muitos outros serviços. Um dos frameworks mais capazes, extensíveis e populares é AngularJS , e um dos componentes mais úteis da estrutura AngularJS é algo chamado de diretriz . AngularJS fornece muitas diretivas úteis e, ainda mais importante, fornece uma estrutura rica para a criação de diretivas personalizadas.
O que é uma diretiva? Para simplificar, as diretivas são funções JavaScript que manipulam e adicionam comportamentos aos elementos HTML DOM. As diretivas podem ser muito simplistas ou extremamente complicadas. Portanto, obter um domínio sólido sobre as muitas opções e funções que os manipulam é fundamental.
Neste tutorial, as quatro funções que executam como uma diretiva são criadas e aplicadas ao DOM serão exploradas e exemplos serão fornecidos. Esta postagem pressupõe alguma familiaridade com AngularJS e diretivas personalizadas. Se você é novo no Angular, pode gostar de um tutorial sobre como construir seu primeiro aplicativo AngularJS.
As quatro funções do ciclo de vida da diretiva AngularJS
Existem muitas opções que podem ser configuradas e como essas opções estão relacionadas entre si é importante. Cada diretiva passa por algo semelhante a um ciclo de vida conforme o AngularJS compila e vincula o DOM. O ciclo de vida da diretiva começa e termina no processo de bootstrap do AngularJS, antes que a página seja renderizada. No ciclo de vida de uma diretiva, existem quatro funções distintas que podem ser executadas se forem definidas. Cada um permite que o desenvolvedor controle e personalize a diretiva em diferentes pontos do ciclo de vida.
As quatro funções são: compilar , controlador , pré-link e post-Link .
o compilar A função permite que a diretiva manipule o DOM antes de ser compilado e vinculado, permitindo-lhe adicionar / remover / alterar diretivas, bem como adicionar / remover / alterar outros elementos DOM.
o controlador função facilita a comunicação diretiva. As diretivas de irmãos e filhos podem solicitar ao controlador de seus irmãos e pais que transmita informações.
o pré-link função permite privacidade $ scope manipulação antes do início do processo de pós-link.
como funciona a tecnologia vestível
o post-link método é o método principal da diretiva.
Na diretiva, ocorre a manipulação do DOM pós-compilação, os manipuladores de eventos são configurados e também os relógios e outras coisas. Na declaração da diretiva, as quatro funções são definidas assim.
.directive('directiveName',function () { return { controller: function() { // controller code here... }, compile: { // compile code here... return { pre: function() { // pre-link code here... }, post: function() { // post-link code here... } }; } } }) Normalmente, nem todas as funções são necessárias. Na maioria das circunstâncias, os desenvolvedores simplesmente criarão um controlador e post-link função seguindo o padrão abaixo.
.directive('directiveName',function () { return { controller: function() { // controller code here... }, link: function() { // post-link code here... } } }) Nesta configuração, ligação refere-se a post-link função.
Se todas ou algumas das funções são definidas, sua ordem de execução é importante, especialmente sua execução em relação ao resto do aplicativo AngularJS.
Execução da função de diretiva AngularJS em relação a outras diretivas
Considere o seguinte snippet de HTML com as diretivas parentDir , childDir e grandChildDir aplicado ao fragmento HTML.
element.html(element.html()); A ordem de execução das funções dentro de uma diretiva e em relação a outras diretivas é a seguinte:
consulta de mídia de largura de tela css
- Fase de Compilação
- Função Compilar : parentDir
- Função Compilar : childDir
- Função Compilar : grandChildDir
- Fase de controlador e pré-link
- Função do controlador : parentDir
- Função Pré-Link : parentDir
- Função do controlador : childDir
- Função Pré-Link : childDir
- Função do controlador : grandChildDir
- Função Pré-Link : grandChildDir
- Fase Post-Link
- Função Post-Link : grandChildDir
- Função Post-Link : childDir
- Função Post-Link : parentDir
Explicação da função da diretiva AngularJS: Deep Dive
A fase de compilação ocorre primeiro. Essencialmente, a fase de compilação anexa ouvintes de eventos aos elementos DOM. Por exemplo, se um determinado elemento DOM estiver vinculado a um $ scope propriedade, o ouvinte de evento que permite que seja atualizado com o valor do $ scope propriedade é aplicada ao elemento DOM. O processo de compilação começa com o elemento DOM raiz a partir do qual o aplicativo AngularJS foi inicializado e atravessa as ramificações do DOM usando uma travessia em profundidade, compilando primeiro um pai e depois seus filhos até os nós folha.
Assim que a compilação estiver concluída, as diretivas não podem mais ser adicionadas ou removidas do DOM (embora haja uma maneira de contornar isso usando diretamente o serviço de compilação . A próxima fase é a chamada de controladores e funções de pré-link para todas as diretivas. Quando o controlador é chamado, o $ scope está disponível e pode ser usado. o $ element injetado no controlador contém o modelo compilado, mas não inclui o conteúdo filho transcluído (conteúdo transcluído é o conteúdo entre as tags HTML de início e fim nas quais a diretiva é aplicada). Por definição, os controladores em um padrão MVC simplesmente passam o modelo para a visualização e definem funções para manipular eventos. Portanto, o controlador de uma diretiva não deve modificar o DOM da diretiva por dois motivos: ele viola a finalidade do controlador e o conteúdo filho transcluído não foi adicionado ao DOM. Então, o que um controlador faz além de modificar o $ scope ? O controlador permite que as diretivas filho se comuniquem com as diretivas pai. A função do controlador em si deve ser pensada como um objeto controlador que será passado para a função pós-link da diretiva filho se a diretiva filho solicitar. Portanto, o controlador é normalmente usado para facilitar a comunicação de diretivas, criando um objeto com propriedades e métodos que podem ser usados por suas diretivas irmão e filho. A diretiva pai não pode determinar se uma diretiva filho pode exigir seu controlador, portanto, é melhor limitar o código neste método a funções e propriedades que podem ser usadas com segurança por diretivas filho.
Após a função do controlador, a função de pré-link é executada. A função de pré-link é misteriosa para muitas pessoas. Se você ler grande parte da documentação na Internet e em livros, as pessoas escreverão que essa função é usada apenas em raras circunstâncias e quase nunca precisarão dela. Essas mesmas explicações, portanto, não fornecem um exemplo de uma situação em que poderia ser usado.
A função de pré-link não é nada complicada. Primeiro, se você revisar o código-fonte do AngularJS, encontrará um excelente exemplo da função de pré-link: a diretiva de calor usa. Por quê? É simplesmente um ótimo método para executar código privado envolvendo o $ scope ; código que não pode ser chamado por diretivas de irmão e filho. Ao contrário da função do controlador, a função de pré-link não é passada para as diretivas. Portanto, pode ser usado para executar código que modifica o $ scope de sua diretiva. A diretiva de calor faz exatamente isso. Quando a função de pré-link para de calor executa, ele simplesmente executa o JavaScript passado para a diretiva contra a diretiva $ scope . O resultado da execução está disponível através do $ scope Herança prototípica de diretivas filhas durante suas execuções de funções de controlador, pré-link e pós-link, mas sem dar acesso a essas diretivas filhas para reexecutar o código na função de pré-link do pai. Além disso, a diretiva pode precisar executar outro código não relacionado ao $ scope que deseja manter privado.
Alguns desenvolvedores experientes de AngularJS diria isso privado o código ainda pode ser colocado no controlador e não ser chamado pelas diretivas filhas. Esse argumento seria verdadeiro se a diretiva fosse usada apenas pelo desenvolvedor original que a codificou, mas se a diretiva for distribuída e reutilizada por outros desenvolvedores, encapsular o código privado na função de pré-link pode ser muito benéfico. Uma vez que os desenvolvedores nunca sabem como sua diretiva será reutilizada ao longo do tempo, proteger o código privado de ser executado por uma diretiva filha é uma boa abordagem para o encapsulamento do código de diretiva. Considero uma boa prática colocar o código público de comunicação diretiva na função do controlador e o código privado na função de pré-link. Como o controlador, o pré-link nunca deve fazer manipulação de DOM nem executar uma função transcluir, uma vez que o conteúdo das diretivas filho ainda não foi vinculado.
Para cada diretiva, seu controlador e função de pré-link são executados antes do controlador e função de pré-link de suas diretivas filhas. Uma vez que o controlador e a fase de pré-link para todas as diretivas estão concluídas, o AngularJS começa a fase de link e executa as funções pós-link para cada diretiva. A fase de vinculação é oposta aos fluxos de execução de compilação, controlador e pré-vínculo, começando com os nós DOM folha e avançando até o nó DOM raiz. A passagem de DOM pós-link segue um caminho principalmente de profundidade. À medida que cada diretiva filha é vinculada, sua função pós-link é executada.
A função pós-link é a função mais comumente implementada em diretivas AngularJS personalizadas. Nesta função, quase tudo o que é razoável pode ser feito. O DOM pode ser manipulado (para ele mesmo e para os elementos filhos apenas), o $ scope está disponível, o objeto controlador para as diretivas pai pode ser usado, funções transcluir podem ser executadas, etc. No entanto, existem algumas limitações. Novas diretivas não podem ser adicionadas ao DOM porque não serão compiladas. Além disso, todas as manipulações DOM devem ser feitas usando funções DOM. Basta ligar para o html no elemento DOM e passar um novo HTML removerá todos os manipuladores de eventos adicionados durante o processo de compilação. Por exemplo, eles não funcionarão como esperado:
element.html(element.html() + ' new content '); ou
|_+_|
O código não fará com que o HTML mude, mas reatribuir a versão da string dos elementos DOM removerá todos os manipuladores de eventos criados durante o processo de compilação. Normalmente, a função pós-link é usada para conectar manipuladores de eventos, $ assistir é e $ observe s.
Assim que todas as funções pós-link forem executadas, o $ scope é aplicado à estrutura DOM compilada e vinculada, e a página AngularJS ganha vida.
Gráfico de função diretiva
Aqui está um gráfico que lista a finalidade de cada função, o que está disponível quando ela é executada e as melhores práticas sobre como usar cada função de forma adequada.
