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.
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 ></div>
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 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. (Ej. affixed=»{{obj}}»)
«=»: Usado para pasar datos entre vista-controlador o por referencia. (Ej. title=»title»)
«&»: Muy usados para llamar a funciones. (Ej. 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'
}
});
Nada más, tengo como tarea pendiente ir añadiendo varios posts con componentes útiles para nuestras webs usándolos en AngularJS. Así que estad atentos!