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.

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.