¿Cuándo usar transclude 'true' y transclude 'element' en Angular?

¿Cuándo debo usar transclude: 'true'y cuándo transclude: 'element'? No puedo encontrar nada sobre transclude: 'element'los documentos angulares, son bastante confusos.

Sería feliz si alguien pudiera explicar esto en un lenguaje simple. ¿Cuál es el beneficio de cada opción? ¿Cuál es la verdadera diferencia entre ellos?

Esto es lo que he encontrado:

transclude: true

Dentro de una función de compilación, puede manipular el DOM con la ayuda de la función de vinculación transclude o puede insertar el DOM transcluido en la plantilla utilizando la directiva ngTransclude en cualquier etiqueta HTML.

y

transclude: ‘element’

Esto transcluye todo el elemento y se introduce una función de enlace transcluir en la función de compilación. No puede tener acceso al alcance aquí porque el alcance aún no se ha creado. La función de compilación crea una función de enlace para la directiva que tiene acceso al alcance y transcludeFn le permite tocar el elemento clonado (que fue transcluido) para la manipulación del DOM o hacer uso de datos vinculados al alcance en él. Para su información, esto se usa en ng-repeat y ng-switch.

De la documentación de AngularJS sobre directivas :

transclude- 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).

true - transcluir el contenido de la directiva.

'element' - transcluir todo el elemento, incluidas las directivas definidas con menor prioridad.

transcluir: verdadero

Entonces, supongamos que tiene una directiva llamada my-transclude-truedeclarada con transclude: trueeste aspecto:

<div>
  <my-transclude-true>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-true>
</div>

Después de compilar y antes de vincular esto se convierte en:

<div>
  <my-transclude-true>
    <!-- transcluded -->
  </my-transclude-true>
</div>

El contenido (hijos) del my-transclude-truecual es<span>{{ something }}</span> {{... , está transcluido y disponible para la directiva.

transcluir: 'elemento'

Si tiene una directiva llamada my-transclude-elementdeclarada con transclude: 'element'ese aspecto:

<div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

Después de compilar y antes de vincular esto se convierte en:

<div>
   <!-- transcluded -->
</div>

Aquí, todo el elemento, incluidos sus hijos secundarios, se transcluyen y se ponen a disposición de la directiva.

¿Qué sucede después de vincular?

Depende de su directiva hacer lo que tiene que hacer con la función de transcluir. ngRepeatutiliza transclude: 'element'para que pueda repetir todo el elemento y sus elementos secundarios cuando cambia el alcance. Sin embargo, si solo necesita reemplazar la etiqueta y desea retener su contenido, puede usarla transclude: truecon la ngTranscludedirectiva que lo hace por usted.

Cuando se establece en verdadero, la directiva eliminará el contenido original, pero lo hará disponible para su reinserción dentro de su plantilla a través de una directiva llamada ng-transclude.

appModule.directive('directiveName', function() {
    return {
      template: '<div>Hello there <span ng-transclude></span></div>',
      transclude: true
    };
});


<div directive-name>world</div>

renderizado del navegador: "Hola, mundo".

La mejor manera de pensar sobre la transclusión es un marco de imagen. Un marco de imagen tiene su propio diseño y un espacio para agregar la imagen. Podemos decidir qué imagen se colocará dentro de él.

Cuando se trata de angular, tenemos algún tipo de controlador con su alcance y dentro de eso colocaremos una directiva que admita la transclusión. Esta directiva tendrá su propia pantalla y funcionalidad. En la directiva no translúcida, el contenido dentro de la directiva se decide por la directiva misma, pero con la transclusión, al igual que un marco de imagen, podemos decidir qué habrá dentro de la directiva.

angular.module("app").directive('myFrame', function () {
    return {
        restrict: 'E',
        templateUrl:"frame.html",
        controller:function($scope){
          $scope.hidden=false;
          $scope.close=function(){
            $scope.hidden=true;

          }
        },
        transclude:true


    }

});

Contenido dentro de la directiva

<div class="well" style="width:350px;" ng-hide="hidden">

  <div style="float:right;margin-top:-15px">
    <i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i> 
  </div>
  <div ng-transclude>
    /*frame content goes here*/
  </div>
</div>

Directiva de llamadas

<body ng-controller="appController">
    <my-frame>
      <span>My Frame content</span>
    </my-frame>
  </body>

Ejemplo