¿Qué es una directiva AngularJS?

Tal vez una definición realmente simple e inicial para directivas angulares sería

Las directivas AngularJS (ng-directives) son atributos HTML con un prefijo ng (ng-model, ng-app, ng-repeat, ng-bind) usado por Angular para extender HTML. ( de: W3schools angular tutorial )

Algunos ejemplos de esto serían

La directiva ng-app define una aplicación AngularJS.

La directiva ng-model vincula la valor de los controles HTML (entrada, select, textarea) a los datos de la aplicación.

La directiva ng-bind vincula los datos de la aplicación a la vista HTML.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

Revisa este tutorial , al menos para mí fue una de las mejores introducciones a Angular. Un enfoque más completo sería todo lo que @mark-rajcok dijo antes.

Mirando la documentación, las directivas son estructuras que puedes escribir que angularjs analiza para crear objetos y behaviors.In en otras palabras, es una plantilla en la que se utiliza una mezcla de nodos arbitrarios y pseudo-javascript y marcadores de posición para los datos para expresar las intenciones de cómo su widget (componente) está estructurado, cómo se comporta y cómo se alimenta con datos. Angularjs luego se ejecuta contra esas directivas para traducirlas a html/javascript de trabajo codificar.

Las directivas están ahí para que pueda construir componentes más complejos (widgets) utilizando la semántica adecuada. Basta con echar un vistazo al ejemplo de directivas angularjs - están definiendo el panel de pestañas (que por supuesto no es válido en HTML normal). Es más intuitivo que usar div-s o spans para crear una estructura que luego se estiliza a como un panel de pestañas.

En las directivas AngularJS hay marcadores re html para un elemento DOM HTML como un atributo(restrict - A), nombre de elemento(restrict - E), comentario(restrict - M) o clase CSS(restrict - C) que le dicen al compilador HTML de AngularJS (compile compile) que realice un comportamiento especificado a ese elemento DOM o incluso transforme el elemento DOM y sus hijos.Algunos ejemplos son ng-bind ,ng-hide/show, etc.

La página de inicio es muy clara al respecto: Al pasar el cursor sobre las pestañas en la última sección:

Hemos ampliado el vocabulario de HTML con un {[1 personalizado]} elemento. El tabs abstrae la compleja estructura HTML y el comportamiento necesario para el renderizado de tabs. El resultado es un más vista legible y sintaxis muy fácilmente reutilizable."

Luego en la siguiente pestaña:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

Así que puedes inventar elementos html, es decir tabs y dejar que angular maneje la representación de esos elemento.