¿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?

angularjs angularjs-directive transclusion Code Whisperer
fuente

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.

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

Visualizar:

Ben Fischer
fuente

Esta es una descripción mucho mejor que sus documentos oficiales. Ese me duele la cabeza.

Capaj

¡Gran respuesta! :) El enlace que compartiste me ayudó a entender el proceso de transclude.

Paulo Oliveira

Angular debería usar esta explicación en lugar de los documentos que tienen actualmente.

Jeremy W

@codeofnode es el servicio de compilación de su angular, aquí está el código relevante github.com/angular/angular.js/blob/…

Ben Fischer

Las respuestas de Stackoverflow son la mejor manera de comprender los conceptos angulares

sridhar ..

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

Creo que la respuesta principal es perfecta, pero si vienes de un fondo rubí, estoy de acuerdo, yieldparece una buena analogía.

Apie

@Apie sí, vengo de un fondo rubí

Sîrbu Nicolae-Cezar