Como criar uma diretiva em AngularJS

As diretivas são marcadores em um elemento DOM (como um atributo, o nome do elemento, comentário ou classe CSS) que informam ao compilador HTML do AngularJS ($compile) para anexar um comportamento específico para o elemento DOM ou mesmo transformar o elemento DOM e seus filhos. (AngularJS Developer Guide)

Angular já possui diretivas em si próprio, como ngModel, ngClick, ngChange, etc. Mas você pode criar as suas próprias para finalidades específicas em relação à apresentação de dados e tratamento HTML.

Criando Diretiva

Você pode instanciar um app AngularJS e adicionar diretivas a ele, como no exemplo a seguir.

Você pode usar a diretiva a cima da seguinte maneira:

Veja que podemos usa-la tanto como atributo quanto como elemento. Isso graças ao que foi informado na opção restrict

Opção restrict

Esta opção é usada para definir como a diretiva será invocada, seguindo as quatro formas diferentes de diretivas.

1
2
3
4
‘A’ <span hello-world></span>
‘E’ – <hello-world></hello-world>
‘C’ – <span class=“hello-world”></span>
‘M’ – <!– directive: hello-world –>

Você pode usar um ou mais tipos por diretiva, no nosso caso usamos AE, o que fará com que nossa diretiva seja usada apenas como atributo ou elemento.

Template

Você pode definir o template de sua diretiva passando texto HTML com string na opção template. Você também pode usar a opção templateUrl e apontar para um arquivo HTML:

Opção require

É usada para determinar quais diretivas são requeridas para sua nova diretiva:

No exemplo acima a diretiva ng-model é requirida, e um erro será mostrado se ela não estiver no mesmo elemento. Para que o erro não seja mostrado basta usar (?) ao invés de (^).

Compilando

Existem duas formas de “compilar” uma diretiva AngularJS, usando as opções link ou compile. A diferença é que compile é chamada antes do DOM ser renderizado.

No nosso exemplo usaremos link. Esta diretiva serve para mostrar a data e hora atual, atualizando a cada segundo.

Nossa diretiva deve ser usada da seguinte forma:


Concluindo

Este é um exemplo básico de como fazer diretivas usando AngularJS. Veja mais na Documentação Oficial.
Em breve postaremos mais sobre diretivas em AngularJS e Angular2.

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

Uma resposta

  1. Douglas

    Olá Jayr, firmeza. Cara, como eu faria para criar uma diretiva que a substitua por outras duas diretivas nativas com valor? Ex.: ao adicionar “minha-diretiva” em um input (), o AngularJS substitua por “ng-bla1='{{$root.bla1}}’ ng-bla2='{{$root.bla2}}'”.

    Responder

Deixe uma resposta

Seu e-mail não será publicado.