Quando utilizzare transclude 'true' e transclude 'element' in Angular?

Quando dovrei usare transclude: 'true'e quando transclude: 'element'? Non riesco a trovare nulla transclude: 'element'nei documenti angolari, sono piuttosto confusi.

Sarei felice se qualcuno potesse spiegarlo in un linguaggio semplice. Qual è il vantaggio di ciascuna opzione? Qual è la vera differenza tra loro?

Questo è quello che ho trovato:

transclude: true

All'interno di una funzione di compilazione, puoi manipolare il DOM con l'aiuto della funzione di collegamento transclude oppure puoi inserire il DOM escluso nel modello usando la direttiva ngTransclude su qualsiasi tag HTML.

e

transclude: ‘element’

Ciò esclude l'intero elemento e una funzione di collegamento transclude viene introdotta nella funzione di compilazione. Non è possibile accedere all'ambito qui perché l'ambito non è ancora stato creato. La funzione di compilazione crea una funzione di collegamento per la direttiva che ha accesso all'ambito e transcludeFn consente di toccare l'elemento clonato (che è stato escluso) per la manipolazione del DOM o di utilizzare i dati associati all'ambito in esso. Per tua informazione, questo è usato in ng-repeat e ng-switch.

A partire dal documentazione AngularJS sulle direttive :

transclude- compilare il contenuto dell'elemento e renderlo disponibile alla direttiva. Utilizzato in genere con ngTransclude. Il vantaggio della inclusione è che la funzione di collegamento riceve una funzione di inclusione che è pre-vincolata all'ambito corretto. In una configurazione tipica il widget crea un ambito isolato, ma la inclusione non è un figlio, ma un fratello dell'ambito isolato. Ciò rende possibile che il widget abbia uno stato privato e che la trasclusione sia associata all'ambito padre (preisolato).

true - escludere il contenuto della direttiva.

'element' - escludere l'intero elemento, comprese eventuali direttive definite con priorità inferiore.

transclude: true

Quindi diciamo che hai una direttiva chiamata my-transclude-truedichiarata transclude: trueche assomiglia a questa:

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

Dopo la compilazione e prima del collegamento questo diventa:

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

Il cui contenuto (secondario) my-transclude-trueè <span>{{ something }}</span> {{..., è escluso e disponibile per la direttiva.

transclude: 'element'

Se hai una direttiva chiamata my-transclude-elementdichiarata con transclude: 'element'quella assomiglia a questa:

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

Dopo la compilazione e prima del collegamento questo diventa:

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

Qui, l' intero elemento compresi i suoi figli sono esclusi e resi disponibili alla direttiva.

Cosa succede dopo il collegamento?

Spetta alla tua direttiva fare ciò che deve fare con la funzione di esclusione. ngRepeatutilizza in transclude: 'element'modo che possa ripetere l'intero elemento e i relativi figli quando l'ambito cambia. Tuttavia, se devi solo sostituire il tag e desideri mantenerne il contenuto, puoi utilizzarlo transclude: truecon la ngTranscludedirettiva che lo fa per te.

Se impostato su true, la direttiva eliminerà il contenuto originale, ma lo renderà disponibile per il reinserimento nel modello tramite una direttiva denominata ng-transclude.

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


<div directive-name>world</div>

rendering del browser: "Hello there world."

Il modo migliore di pensare alla inclusione è una cornice: una cornice ha un suo design e uno spazio per aggiungere l'immagine. Possiamo decidere quale immagine andrà al suo interno.

Quando si tratta di angolare, abbiamo una sorta di controller con il suo scopo e all'interno di ciò inseriremo una direttiva che supporta la trasclusione. Questa direttiva avrà il proprio display e funzionalità. In una direttiva non tradotta, il contenuto all'interno della direttiva è deciso dalla direttiva stessa ma con la sua inclusione, proprio come una cornice, possiamo decidere cosa sarà all'interno della direttiva.

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


    }

});

Contenuto all'interno della direttiva

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

Chiamare la direttiva

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

Esempio