Las directivas son "comandos" que se incorporan al HTML y que, gracias a ello AngularJS reacciona y ejecuta la acción que hayamos asignado a dicha directiva. Por ejemplo, incrustar código html, botones…

Sin profundizar mucho en el tema, tenemos dos tipos de directivas:

• Las directivas nativas, que son las que ya incorpora AngularJS en sus librerías. Por ejemplo: ng-app, ng-init, ng-model, ng-bind…
• Las directivas custom, que son las que creamos nosotros para enriquecer el framework.

Hablemos de las directivas custom

Cuando creamos una directiva, esta tiene diferentes propiedades/atributos que según como las conifguremos, variará cómo podremos usar la directiva y cómo esta funciona.

Los atributos más comunes para las directivas son:

Restrict

Atributo que indica a la directiva qué tipo de invocación hará ejecutar el código de la misma. Acepta los siguientes parámetros. (Ejemplos con una directiva de nombre forcode)

• A: Cuando un atributo de un elemento del DOM sea el nombre de la directiva.

<div forcode />

• C: En este caso, se invocará a la directiva cuando el nombre de esta aparezca dentro del atributo class de un elemento del DOM.

<div class="forcode"></div>

• M: Cuando una directiva tenga este parámetro como restrict, se invocará cuando esté el nombre de la directiva como un comentario en el DOM.

<!—directive: forcode -->

• E: En este caso, la directiva se invocará cuando detecte un tag html en el DOM, con el nombre de la directiva.

<forcode></forcode>

• EA: La directiva se invocará de dos maneras, tanto si usamos el caso de A, como si usamos el caso de E.

<div forcode></div>
<!-- o -->
<forcode></forcode>

Template

Sirve para construir el HTML que tendrá la directiva.

template: '<div>Hola forCoders</div>',

TemplateUrl

Se usa para asignar una ruta hacia el html que usará la directiva.

template: '/app/views/directiva.html',

Scope

Se usa para crear scope hijo o un scope aislado. También sirve para coger los parámetros que le pasemos a la directiva y usarlos en nuestro código.

• @: Usado para variables del $scope o por valor. En el ejemplo, affixed="{{obj}}"
• =: Usado para pasar datos entre vista-controlador o por referencia. En el ejemplo, title="title"
• &: Muy usados para llamar a funciones. En el ejemplo, show="getSomeData(obj)")

<forcode affixed="{{obj}}" title="title" show="getSomeData(obj)"></forcode>

Controller

Atributo para asociar un controlador a la directiva. También podemos asignar una función, aunque queda más limpio del primer modo.

controller: 'directivaController'
// o
controller: function($scope, $element, $attrs){ }

Link

Función para realizar acciones en el DOM.

Ejemplo de Directiva

app.directive("forcode", function () {
  return {
    restrict: "AE",
    scope: {
      affixed: "=",
    },
    templateUrl: "/app/views/directive.html",
    controller: "navbarController",
  };
});

Esto es todo sobre directivas con AngularJS.

¡Saludos!