AngularJS: Directivas

forCode_AngularJS

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!

  • assasd

    Algun ejemplo para descargar