Wann sollte transclude 'true' und transclude 'element' in Angular verwendet werden?

Wann soll ich transclude: 'true'wann verwenden transclude: 'element'? Ich kann nichts transclude: 'element'in den eckigen Dokumenten finden, sie sind ziemlich verwirrend.

Ich würde mich freuen, wenn jemand dies in einfacher Sprache erklären könnte. Was ist der Vorteil jeder Option? Was ist der wahre Unterschied zwischen ihnen?

Folgendes habe ich gefunden:

transclude: true

Innerhalb einer Kompilierungsfunktion können Sie das DOM mithilfe der Transclude-Verknüpfungsfunktion bearbeiten oder das transcluded DOM mithilfe der ngTransclude-Direktive für jedes HTML-Tag in die Vorlage einfügen.

und

transclude: ‘element’

Dies transkludiert das gesamte Element und eine Transclude-Verknüpfungsfunktion wird in die Kompilierungsfunktion eingeführt. Sie können hier nicht auf den Bereich zugreifen, da der Bereich noch nicht erstellt wurde. Die Kompilierungsfunktion erstellt eine Verknüpfungsfunktion für die Direktive, die Zugriff auf den Bereich hat. Mit transcludeFn können Sie das geklonte Element (das transkludiert wurde) für die DOM-Manipulation berühren oder Daten verwenden, die an den Bereich gebunden sind. Zu Ihrer Information wird dies in ng-repeat und ng-switch verwendet.

Aus der AngularJS-Dokumentation zu Richtlinien :

transclude- den Inhalt des Elements kompilieren und der Richtlinie zur Verfügung stellen. Wird normalerweise mit ngTransclude verwendet. Der Vorteil der Transklusion besteht darin, dass die Verknüpfungsfunktion eine Transklusionsfunktion empfängt, die an den richtigen Bereich gebunden ist. In einem typischen Setup erstellt das Widget einen isolierten Bereich, aber die Transklusion ist kein untergeordnetes Element, sondern ein Geschwister des isolierten Bereichs. Auf diese Weise kann das Widget einen privaten Status haben und die Transklusion an den übergeordneten Bereich (vor dem Isolieren) gebunden werden.

true - den Inhalt der Richtlinie ausschließen.

'element' - das gesamte Element einschließlich aller Richtlinien mit niedrigerer Priorität ausschließen.

transclude: wahr

Nehmen wir also an, Sie haben eine Direktive mit dem Namen my-transclude-truedeklariert transclude: true, die folgendermaßen aussieht:

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

Nach dem Kompilieren und vor dem Verknüpfen wird dies:

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

Der Inhalt (Kinder) my-transclude-truedavon ist ausgeschlossen <span>{{ something }}</span> {{...und steht der Richtlinie zur Verfügung.

transclude: 'element'

Wenn Sie eine Anweisung namens my-transclude-elementdeklariert haben transclude: 'element', sieht dies folgendermaßen aus:

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

Nach dem Kompilieren und vor dem Verknüpfen wird dies:

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

Hier wird das gesamte Element einschließlich seiner Kinder transkludiert und der Richtlinie zur Verfügung gestellt.

Was passiert nach dem Verknüpfen?

Es liegt an Ihrer Anweisung, das zu tun, was mit der Transclude-Funktion zu tun ist. ngRepeatwird verwendet transclude: 'element', damit das gesamte Element und seine untergeordneten Elemente wiederholt werden können, wenn sich der Bereich ändert. Wenn Sie jedoch nur das Tag ersetzen müssen und dessen Inhalt beibehalten möchten, können Sie es transclude: truemit der ngTranscludeDirektive verwenden, die dies für Sie erledigt.

Bei true löscht die Direktive den ursprünglichen Inhalt, stellt ihn jedoch über eine Direktive namens ng-transclude zum erneuten Einfügen in Ihre Vorlage zur Verfügung.

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


<div directive-name>world</div>

Browser rendern: "Hallo Welt."

Die beste Art, über Transklusion nachzudenken, ist ein Bilderrahmen. Ein Bilderrahmen hat ein eigenes Design und einen Platz zum Hinzufügen des Bildes. Wir können entscheiden, welches Bild darin enthalten sein soll.

Wenn es um Winkel geht, haben wir eine Art Controller mit seinem Umfang und innerhalb dessen werden wir eine Direktive platzieren, die die Transklusion unterstützt. Diese Richtlinie verfügt über eine eigene Anzeige und Funktionalität. In einer nicht übersetzten Richtlinie wird der Inhalt innerhalb der Richtlinie von der Richtlinie selbst bestimmt, aber mit Transklusion können wir wie bei einem Bilderrahmen entscheiden, was in der Richtlinie enthalten sein soll.

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


    }

});

Inhalt innerhalb der Richtlinie

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

Direktive anrufen

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

Beispiel