Hola chicos, hoy veremos cómo crear nuestras propias directivas en AngularJs.

 

Lo primero que tenemos que hacer es crear un módulo y ahí guardaremos nuestra directiva, la forma de crear una directiva es la siguiente: 

.directive('nombreDirectiva', function(){
 
})
 

Asi cómo los controladores, filtros y servicios; el método .directive requiere dos parámetros, el primero es el nombre de la directiva y el segundo es la función. Una directiva deberá regresarnos un objeto y las propiedades del objeto que regresa la directiva definirán el comportamiento de la directiva. 

Muy bien, ahora la primer propiedad que vamos a colocarle a nuestro objeto es restrict, la cuál define cómo es que la directiva será utilizada. AngularJs permite usar algunas valores para el la propiedad restrict:

1.- A: Restringe a la directiva ser adjunta utilizando un atributo por ejemplo, 

<div nombreDirectiva></div>
 

2.- E: Permite a la directiva ser utilizada cómo un elemento personalizado, 

<nombreDirectiva></nombreDirectiva>
 

3.- C: Permite a la directiva ser usada añadiendole una clase al elemento,

 <div class="nombreDirectiva"></div>
 

4.- M: Permite a la directiva ser ejecutada desde un comentario HTML,

 <!-- directive: nombreDirectiva -->
 

Nota: Lo más recomendable es es utilizar atributos y elementos. 

Por default AngularJs establece la directiva cómo atributo solamente, pero podemos usar combinaciones de valores, por ejemplo:

.directive('nombreDirectiva', function(){
    return {
        restrict: 'AE'
    }
})
 

También podemos optar por crear un template para nuestra directiva, si es que lo requiere. El template puede ser incluido directamente en nuestro objeto utilizando la propiedad template ó de igual manera usando la propiedad templateUrl la cuál lee un template en un archivo externo desde una URI(Uniform Resource Identifier) especifica. Por ejemplo, vamos a crear la etiqueta img la cuál podemos añadirla directamente en nuestro objeto: 

.directive('nombreDirectiva', function(){
    return {
        restrict: 'AE',
        template: '<img ng-src="{{img}}" class="{{class}}">'
    }
})
 

Ahora bien, necesitamos la propiedad link dentro de nuestro objeto, desde aquí podremos acceder al scope, el elemento de la directiva se agrega también, asi cómo cualquier atributo sobre ese elemento: 

.directive('nombreDirectiva', function(){
    return {
        restrict: 'AE',
        template: '<img src="{{img}}" class="{{class}}">',
        link: function(scope, elem, attrs){
 
        }
    }
})
 

Por ejemplo, si estuviéramos construyendo una directiva para cargar una imagen (gravatar) necesitamos hacer hash del email del usuario del cuál queremos mostrar su foto utilizando md5, esto lo hacemos incluyendo una librería separada y lo mandamos llamar en una variable:

.directive('gravatarDirective', function(){
    return {
        restrict: 'AE',
        template: '<img src="{{img}}" class="{{class}}">',
        replace: true,
        link: function(scope, elem, attrs){
            var md5=function(s){...};
        }
    }
})
 

Ahora bien, ya hemos incluido la función que hace el trabajo del md5, ya podemos acceder a la imagen del contacto desde Gravatar. 
Los atributos pasados a nuestra función son solo objetos a los que podemos acceder:

link: function(scope, elem, attrs){
 
        }
 

por ejemplo si queremos encontrar el valor del atributo email lo podemos hacer de la siguiente manera:

attrs.email
 

También podemos definir la propiedad replace, la cuál nos ayudará a reemplazar el elemento que hemos ligado a la directiva con la plantilla específica. 
Así queda nuestra directiva final:

.directive('gravatarDirective', function(){
    return {
        restrict: 'AE',
        template: '<img src="{{img}}" class="{{class}}">',
        replace: true,
        link: function(scope, elem, attrs){
            var md5=function(s){ ? };
            var size = (attrs.size) ? attrs.size : 64;
            scope.img = 'http://gravatar.com/avatar/'+md5(attrs.email)+'?s='+size;
            scope.class = attrs.class;
        }
    }
})
 

Para mandar llamar la directiva que creamos (gravatarDirective) en nuestra vista HTML, lo podemos hacer de la siguiente manera:

<gravatarDirective email="{{contact.email}}" size="50" class="img-circle"></gravatarDirective>
 

Asi se ve en el vegador: 

directive.png

Fuente: Learning Web Development with Bootstrap and AngularJS by Stephen Radford 

@telecristy. 

¿Te gustó esta publicación? Márcala como favorita