9.3 Funcion Link

Hasta hora hemos visto como definir una la directiva de forma declarativa, es decir especificando como debe comportarse la directiva. Lo último que nos falta ver en esta unidad es añadir una función que se ejecutará al iniciarse la directiva. A esta función se le llama la función “link”. Para definirla deberemos añadir dicha función a la propiedad link del objeto con la definición de la directiva.

La función link acepta 4 parámetros que son:

• scope: Es el scope de nuestra directiva
• iElement: Es el elemento del DOM del contenido de nuestra directiva.
• iAttrs : Son todos los atributos de se han puesto en la directiva “normalizados” ¹⁾.
• controller: Veremos esta función en la unidad 00_start
• transcludeFn: Veremos esta función en la unidad 00_start

Vamos a modificar la directiva acTitulo del tema anterior haciendo que se pueda elegir el color , solo que vamos a permitir que se haga usando colores en castellano en vez de en inglés. Para ello vamos a tener que modificar la directiva para transformar el color de castellano al formato del color de HTML.

Vamos a hacer que la directiva se pueda usar de la siguiente manera:

app.directive("acTitulo",[function() {
  
  var directiveDefinitionObject ={
    restrict:"E",
    replace : true,
    template:"<h1>{{texto}}</h1>",
    scope:{
      texto:"@"
    },
    link:function(scope, iElement, iAttrs, controller, transcludeFn) {
        var htmlColor;
        
        switch (iAttrs.color) {
            case "rojo":
                htmlColor="#FF0000";
                break;
            case "verde":
                htmlColor="#00FF00";
                break;
            case "azul":
                htmlColor="#0000FF";
                break;
            default:
                htmlColor="#000000";
                break;
        }
      
        iElement.css("color",htmlColor);
      
    }
    
  }
  
  return directiveDefinitionObject;
}]);