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.
var app = angular.module('myapp', []); app.directive('helloWorld', function() { return { restrict: 'AE', template: '<h3>Hello World!!</h3>' }; });
Você pode usar a diretiva a cima da seguinte maneira:
<div hello-world></div> <!-- ou --> <hello-world/>
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:
templateUrl: 'templates/hello-world.html'
Opção require
É usada para determinar quais diretivas são requeridas para sua nova diretiva:
require: '^ngModel'
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.
var app = angular.module('myapp'); app.directive('relogio', function($interval){ return{ restrict: 'AE', link: function(scope, element, attrs){ var timer = $interval(function(){ mudaTempo(); },1000); function mudaTempo(){ element.text((new Date()).toLocaleString()); } } } });
Nossa diretiva deve ser usada da seguinte forma:
<div ng-app="myapp"> <relogio> </div>
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.
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}}'”.
Gostei.
A diretiva ng-class permite adicionar uma classe dinamicamente no elemento por meio de uma expressao.