¿Comprender la opción transcluir de definición de directiva?

Creo que este es uno de los conceptos más difíciles de entender con la directiva de angularjs.

El documento de http://docs.angularjs.org/guide/directive dice:

transcluir : compila el contenido del elemento y lo pone a disposición de la directiva. Normalmente se usa con ngTransclude. La ventaja de la transclusión es que la función de enlace recibe una función de transclusión que está vinculada previamente al alcance correcto. En una configuración típica, el widget crea un ámbito de aislamiento, pero la transclusión no es un elemento secundario, sino un hermano del ámbito de aislamiento. Esto hace posible que el widget tenga un estado privado y que la transclusión esté vinculada al ámbito primario (preaislado).

• verdadero: transcluye el contenido de la directiva.
• 'elemento': transcluye todo el elemento, incluidas las directivas definidas con menor prioridad.

Dice transcludetípicamente utilizado con ngTransclude. Pero la muestra del documento de ngTransclude no usa la ngTranscludedirectiva en absoluto.

Quisiera algunos buenos ejemplos para ayudarme a entender esto. ¿Por qué lo necesitamos? ¿Qué resuelve? ¿Cómo usarlo?

Considere una directiva llamada myDirective en un elemento, y ese elemento encierra algún otro contenido, digamos:

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Si myDirective está usando una plantilla, verá que el contenido de <div my-directive>será reemplazado por su plantilla directiva. Entonces teniendo:

app.directive('myDirective', function(){
    return{
        template: '<div class="something"> This is my directive content</div>'
    }
});

resultará en este render:

<div class="something"> This is my directive content</div> 

Tenga en cuenta que el contenido de su elemento original <div my-directive> se perderá (o mejor dicho, se reemplazará). Entonces, diga adiós a estos amigos:

<button>some button</button>
<a href="#">and a link</a>

Entonces, ¿qué pasa si quieres mantener tu <button>...y <a href>...en el DOM? Necesitarás algo llamado transclusión. El concepto es bastante simple: incluye el contenido de un lugar a otro . Así que ahora su directiva se verá así:

app.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
    }
});

Esto representaría:

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>. 

En conclusión, básicamente usa transclude cuando desea preservar el contenido de un elemento cuando usa una directiva.

Mi código de ejemplo está aquí . También podría beneficiarse al ver esto .

Creo que es importante mencionar los cambios en el comportamiento anterior en la nueva versión de AngularJS. Pasé una hora tratando de lograr los resultados anteriores con Angular 1.2.10.

El contenido del elemento con ng-transclude no se agrega sino que se reemplaza por completo.

Entonces, en el ejemplo anterior, lo que lograrías con 'transcluir' sería:

<div class="something">
    <button>some button</button>
    <a href="#">and a link</a>
</div>

y no

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Gracias.

Lo que dice TechExplorer es cierto, pero puede tener ambos contenidos al incluir en su plantilla una etiqueta de contenedor simple (como div o span) con el atributo ng-transclude. Esto significa que el siguiente código en su plantilla debe incluir todo el contenido

<div class="something"> This is my directive content <div class="something" ng-transclude></div></div>

De Wiki:

"En informática, la transclusión es la inclusión de parte o la totalidad de un documento electrónico en uno o más documentos por referencia".

Me gustaría agregar otro uso para la transclusión, y es que cambia el orden de ejecución de las funciones de compilación y enlace de las directivas padre e hijo. Esto puede ser útil cuando desea compilar el DOM secundario antes que el DOM primario ya que el DOM primario quizás depende del DOM secundario. ¡Este artículo va más en profundidad y lo aclara muy bien!

http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives-part-2-transclusion/

La documentación actualizada de AngularJS 1.6.6 ahora tiene una mejor explicación.

Transclude se utiliza para crear una directiva que envuelve otros elementos

A veces es deseable poder pasar una plantilla completa en lugar de una cadena o un objeto. Digamos que queremos crear un componente de "cuadro de diálogo". El cuadro de diálogo debe poder envolver cualquier contenido arbitrario.

Para hacer esto, necesitamos usar la opción de transcluir . Consulte el ejemplo a continuación.

script.js

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.name = 'Tobias';
}])
.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function(scope) {
      scope.name = 'Jeff';
    }
  };
});

index.html

<div ng-controller="Controller">
  <my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>

my-dialog.html

<div class="alert" ng-transclude></div>

Salida compilada

<div ng-controller="Controller" class="ng-scope">
  <my-dialog class="ng-isolate-scope"><div class="alert" ng-transclude="">Check out the contents, Tobias!</div></my-dialog>
</div>

Transclude hace que el contenido de una directiva con esta opción tenga acceso al alcance fuera de la directiva en lugar de dentro.

Esto se ilustra en el ejemplo anterior. Tenga en cuenta que hemos agregado una función de enlace en script.js que redefine el nombre como Jeff. Normalmente, esperaríamos que {{name}} fuera Jeff. Sin embargo, vemos en este ejemplo que el enlace {{name}} sigue siendo Tobias.

Práctica recomendada : solo úsela transclude: truecuando desee crear una directiva que envuelva contenido arbitrario.

transcluir: verdadero significa agregar todos los elementos definidos en su directiva con el elemento de plantilla de su directiva.

if transclude: false, estos elementos no están incluidos en su html final de directiva, solo se representa la plantilla de directiva.

transclude: elemento significa que su plantilla de directiva no se usa, solo el elemento definido en su directiva se representa como html.

cuando define su directiva, entonces debe restringirse a E y cuando la agrega en la página, entonces

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.