Índice

Transclusión

Cuando se utilizan directivas con templates, puede resultar interesante no eliminar el contenido del elemento HTML vinculado a la directiva para poder reutilizarlo en el interior del template.

El principio consiste en capturar el contenido del elemento HTML para, a continuación, inyectarlo en el template que invoca la transclusión. Para poder utilizarlo en AngularJS, es preciso configurar la propiedad transclude de la directiva a true, pues por defecto esta propiedad vale false.

module.directive("miDirectiva", function() {  
    return {  
        restrict: "EA",  
        template: "<p>¡Hola!</p>",  
        transclude: true  
    };  
});

Para definir la posición del contenido HTML capturado, se utiliza la directiva ngTransclude en el template.

module.directive("miDirectiva", function() {  
    return {  
        restrict: "EA",  
        template: "<p>¡Hola <span ng-transclude></span>!</p>", 
        transclude: true  
    };  
});

La directiva anterior define la posición de la transclusión en una etiqueta span, entre el texto "¡Hola" y el texto "!", gracias a la directiva ng-transclude.

<body>  
   ...