O que são as diretivas?

Diretivas ou directives (em inglês), são marcadores em um DOM element (podendo ser um atributo, nome de elemento, comentário ou classe das CSS)

que fala para o Angular HTML compiler ($compile) anexar um designado conteúdo, ou até mesmo transformar/gerenciar o DOM e suas “childrens”.

O Angular em si já vem com várias dessas diretivas embutidas. Tais como ngView, ngModel, ngBind, ngRepeat, ngShow, ngHide. Assim como você pode criar os seus controllers/controladores, você também pode criar as suas próprias diretivas para usar no Angular.

Usando diretivas

Antes de escrevermos uma diretiva, precisamos saber como o Angular HTML compiler determina quando usar uma dada diretiva.

No exemplo abaixo, nós estamos dizendo que o elemento <input> corresponde a diretiva ngModel.

<input type="text" ng-model="foo">

O exemplo abaixo também corresponde a diretiva ngModel:

<input type=”text” data-ng:model=”foo”>

Nos referimos a diretivas pelo seu nome normalizado (i.e. ngRepeat, minhaDiretivaNumeroUm) em case-sensitive e em CamelCase. Contudo, já que o HTML é case-insensitive as diretivas precisam ter seus nomes desnormalizados ou adaptados antes de entrarem no DOM.

Desnormalização

Existem vários processos de desnormalização, um deles é o processo de desnormalização delimitado por traços, que se baseia em substituir as letras maíusculas por letras minúsculas e adicionar um traço antes (.i.e ngRepeat, ngModel, myDirective, se transformam respectivamente em ng-repeat, ng-model e my-directive dentro do DOM), porém é possível adicionar prefixos e outros parâmetros.

Normalização

O processo de normalização serve para traduzir o nome desnormalizado no nome real da diretiva.

1. É retirado o x- e data- do começo do element/atributo.
2. :, - ou _-x são convertidos em camelCase.

Onde x no passo DOIS, representa o nome da classe em formato de dash-delimited.

Ou seja, ng-model, my-directive ou this-is-a-directive são traduzidos para ngModel, myDirective ou thisIsADirective, o contrário do que foi explicado anteriormente, no processo de desnormalização.

Abaixo você pode ver um exemplo com as combinações possíveis para a diretiva ngBind.

<div ng-controller=”AppController”>
  Hello <input ng-model=’name’> <hr/>
  <span ng-bind=”name”></span> <br/>
  <span ng:bind=”name”></span> <br/>
  <span ng_bind=”name”></span> <br/>
  <span data-ng-bind=”name”></span> <br/>
  <span x-ng-bind=”name”></span> <br/>
</div>

O $compile suporta diretivas baseadas em nomes de elementos, atributos, classes das CSS e comentários.

Abaixo você pode ver alguns métodos que você pode utilizar para marcar diretivas:

<my-dir></my-dir>
<span my-dir=”exp”></span>
<!– directive: my-dir exp –>
<span class=”my-dir: exp;”></span>

Vinculando variáveis em atributos

Em breve!

Criando diretivas

Primeiro vamos falar a respeito da API utilizada para criação de diretivas. Assim como os controladores, as diretivas são registradas em módulos. Para registrar uma diretiva, você se usa module.directive.

O module.directive deverá ser aplicado da forma como esta escrito abaixo:

angular.module(‘app’, [])

.directive(‘validate’, function() {
  return {
    template: ‘Esta é a minha primeira diretiva, e eu ainda estou aprendendo.’
  };
});

A definição técnica é module.directive('directiveNormalizedName', directiveFunction), a função aplicada, deverá retornar um objeto.

Restricts

As restricts servem para determinar como as suas diretivas serão chamadas. Abaixo está uma lista de possibilidades para as restricts:

• 'A' - Apenas corresponder por atributo.
• 'E' - Apenas corresponder pelo nome do elemento.
• 'C' - Apenas corresponder pela classe das CSS.

angular.module(‘app’, [])

.directive(‘validate’, function() {
  return {
    restrict: ‘E’,
    template: ‘Esta é a minha primeira diretiva, e eu ainda estou aprendendo.’
  };
});

Mas você também poderá utilizar AEC e fazer com que sua diretiva corresponda através de todos esses métodos.

Melhores práticas

A postagem ainda é breve em relação a este assunto, mas em breve estarei atualizando a postagem, adicionando novas dicas, estarei aumentando a frequência de postagens também.

Um abraço, aguardo vossos comentários, dúvidas, críticas etc.