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

176

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.

LauroSkr
quelle

Antworten:

229

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.

sirhc
quelle
3
Ich habe die made available to the directiveAussage irgendwie verpasst . Das Element steht der Direktive immer zur Verfügung. Können Sie das bitte näher erläutern?
Kerl Mograbi
1
@guymograbi Dieser Satz kann sinnvoller sein als "der Direktive über eine Funktion zur Verfügung gestellt, die an den richtigen Geltungsbereich gebunden ist ".
Michelle Tilley
Wie würde eine Einheit eine Direktive mit einer Transklusion testen, die gleich 'Element' ist? Ich kämpfe derzeit mit diesem Problem. Ich kann scheinbar nicht auf das Element zugreifen, nachdem es transkludiert wurde.
Chester Rivas
33

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

André Dion
quelle
23
Dies beantwortet überhaupt nicht die Frage (die über den Unterschied zwischen transclude: trueund war transclude: element)
Jasper
1
Interessant wäre auch, welche Tags das Browser-DOM nach der Direktive hat, nicht was es liest ...
kontur
8

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.Geben Sie hier die Bildbeschreibung ein

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

Code-EZ
quelle
Trotzdem habe ich die Übertragung nicht verstanden. Können Sie ein einfaches Programm haben, um dies zu veranschaulichen?
Raja