¿Qué es ng-transclude?

266

He visto una serie de preguntas sobre StackOverflow sobre ng-transclude, pero ninguna explica en términos simples qué es.

La descripción en la documentación es la siguiente:

Directiva que marca el punto de inserción para el DOM transcluido de la directiva principal más cercana que utiliza la transclusión.

Esto es bastante confuso. ¿Alguien podría explicar en términos simples lo que se pretende hacer ng-transclude y dónde se puede usar?

Code Whisperer
fuente
1
es básicamente un punto de marcado para lo que sea que esté insertando para la etiqueta o directiva html en particular. úselo con una directiva y lo entenderá mejor.
za

Respuestas:

492

Transcluir es una configuración para indicarle a angular que capture todo lo que se coloca dentro de la directiva en el marcado y lo use en algún lugar (donde realmente ng-transcludeestá) en la plantilla de la directiva. Lea más sobre esto en la sección Creación de una directiva que envuelve otros elementos sobre documentación de directivas .

Si escribe una directiva personalizada, usa ng-transclude en la plantilla de la directiva para marcar el punto donde desea insertar el contenido del elemento

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Si pones esto en tu marcado

<hero name="superman">Stuff inside the custom directive</hero>

Aparecería como:

Superhombre

Cosas dentro de la directiva personalizada

Ejemplo completo:

Index.html

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

ingrese la descripción de la imagen aquí

Visualizar:

ingrese la descripción de la imagen aquí

Ben Fischer
fuente
90
Esta es una descripción mucho mejor que sus documentos oficiales. Ese me duele la cabeza.
Capaj
44
¡Gran respuesta! :) El enlace que compartiste me ayudó a entender el proceso de transclude.
Paulo Oliveira
10
Angular debería usar esta explicación en lugar de los documentos que tienen actualmente.
Jeremy W
1
@codeofnode es el servicio de compilación de su angular, aquí está el código relevante github.com/angular/angular.js/blob/…
Ben Fischer
1
Las respuestas de Stackoverflow son la mejor manera de comprender los conceptos angulares
sridhar ..
1

es una especie de rendimiento, todo desde el element.html () se procesa allí, pero los atributos de la directiva aún son visibles en cierto ámbito.

Sîrbu Nicolae-Cezar
fuente
3
Creo que la respuesta principal es perfecta, pero si vienes de un fondo rubí, estoy de acuerdo, yieldparece una buena analogía.
Apie
2
@Apie sí, vengo de un fondo rubí
Sîrbu Nicolae-Cezar