webentwicklung-frage-antwort-db.com.de

Verstehen Sie die Transclude-Option der Richtliniendefinition?

Ich denke, dies ist eines der schwierigsten Konzepte, die ich mit der Richtlinie von anglejs verstehen kann.

Das Dokument von http://docs.angularjs.org/guide/directive sagt:

transclude - kompiliert den Inhalt des Elements und stellt ihn der Direktive zur Verfügung. Wird normalerweise mit ngTransclude verwendet. Der Vorteil der Transklusion besteht darin, dass die Verknüpfungsfunktion eine Transklusionsfunktion erhält, die an den richtigen Bereich gebunden ist. In einer typischen Konfiguration erstellt das Widget einen isolierten Bereich, die Transklusion ist jedoch kein untergeordnetes Element, sondern ein Geschwister des isolierten Bereichs. Auf diese Weise kann das Widget einen privaten Status haben und die Übertragung an den übergeordneten Bereich (vor dem Isolieren) gebunden werden.

  • true - den Inhalt der Richtlinie ausschließen.
  • 'element' - schließt das gesamte Element einschließlich aller Direktiven mit niedrigerer Priorität aus.

Hier steht transclude, das normalerweise mit ngTransclude verwendet wird. Das Beispiel aus dem Dokument ngTransclude verwendet jedoch überhaupt keine Anweisung ngTransclude.

Ich möchte ein paar gute Beispiele, die mir helfen, dies zu verstehen. Warum brauchen wir das? Was löst es? Wie benutzt man es?

188
Freewind

Betrachten Sie eine Direktive mit dem Namen myDirective in einem Element, und dieses Element schließt einen anderen Inhalt ein, sagen wir:

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

Wenn myDirective eine Vorlage verwendet, wird der Inhalt von <div my-directive> Durch Ihre Direktivenvorlage ersetzt. Also mit:

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

wird in diesem Render führen:

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

Beachten Sie, dass der Inhalt Ihres ursprünglichen Elements <div my-directive> verloren geht (oder besser gesagt, ersetzt). Also verabschieden Sie sich von diesen Freunden:

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

Was ist, wenn Sie Ihren <button>... Und <a href>... Im DOM behalten möchten? Du brauchst etwas, das Transklusion heißt. Das Konzept ist ziemlich einfach: Fügen Sie den Inhalt von einem Ort an einen anderen . Nun sieht Ihre Direktive ungefähr so ​​aus:

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

Dies würde ergeben:

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

Abschließend verwenden Sie transclude grundsätzlich, wenn Sie den Inhalt eines Elements beibehalten möchten, wenn Sie eine Direktive verwenden.

Mein Codebeispiel ist hier . Sie können auch von this profitieren.

500
odiseo

Ich denke, es ist wichtig, Änderungen im obigen Verhalten in der neuen Version von AngularJS zu erwähnen. Ich habe eine Stunde lang versucht, mit Angular 1.2.10.

Der Inhalt des Elements mit ng-transclude wird nicht angehängt, sondern vollständig ersetzt.

Im obigen Beispiel wäre das, was Sie mit 'transclude' erreichen würden:

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

und nicht

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

Vielen Dank.

75
TechExplorer

Was TechExplorer sagt, ist wahr, aber Sie können beide Inhalte in Ihre Vorlage aufnehmen, indem Sie ein einfaches Container-Tag (wie div oder span) mit dem Attribut ng-transclude einfügen. Dies bedeutet, dass der folgende Code in Ihrer Vorlage den gesamten Inhalt enthalten sollte

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

Aus dem Wiki:

"In der Informatik bedeutet Transklusion, dass ein elektronisches Dokument ganz oder teilweise durch Bezugnahme in ein oder mehrere andere Dokumente aufgenommen wird."

Ich möchte eine weitere Verwendung für die Transklusion hinzufügen, die die Ausführungsreihenfolge der Kompilierungs- und Verknüpfungsfunktionen von übergeordneten und untergeordneten Anweisungen ändert. Dies kann hilfreich sein, wenn Sie das untergeordnete DOM vor dem übergeordneten DOM kompilieren möchten, da das übergeordnete DOM möglicherweise vom untergeordneten DOM abhängt. Dieser Artikel vertieft und verdeutlicht es sehr gut!

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

5
Samir Alajmovic

Die aktualisierte AngularJS 1.6.6-Dokumentation hat jetzt eine bessere Erklärung.

Transclude wird verwendet, um eine Direktive zu erstellen, die andere Elemente umschließt

Manchmal ist es wünschenswert, eine ganze Vorlage anstelle einer Zeichenfolge oder eines Objekts übergeben zu können. Angenommen, wir möchten eine "Dialogfeld" -Komponente erstellen. Das Dialogfeld sollte beliebigen Inhalt umbrechen können.

Dazu müssen wir die Option transclude verwenden. Beachten Sie das folgende Beispiel.


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>

Kompilierte Ausgabe

<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 ermöglicht, dass der Inhalt einer Direktive mit dieser Option auf den Geltungsbereich außerhalb der Direktive und nicht innerhalb zugreifen kann.

Dies ist im vorherigen Beispiel dargestellt. Beachten Sie, dass wir in script.js eine Link-Funktion hinzugefügt haben, die den Namen als Jeff neu definiert. Normalerweise würden wir erwarten, dass {{name}} Jeff ist. In diesem Beispiel sehen wir jedoch, dass die Bindung {{name}} immer noch Tobias ist.

Best Practice : Verwenden Sie nur transclude: true, wenn Sie eine Direktive erstellen möchten, die beliebigen Inhalt umschließt.

3
Arthur S

transclude: true bedeutet, dass alle Elemente, die in Ihrer Direktive definiert sind, mit dem Template-Element Ihrer Direktive hinzugefügt werden.

wenn transclude: false, sind diese Elemente nicht in Ihrem endgültigen HTML der Direktive enthalten. Es wird nur die Vorlage der Direktive gerendert.

transclude: Element bedeutet, dass Ihre Direktivenvorlage nicht verwendet wird. Nur in Ihrer Direktive definierte Elemente werden als HTML gerendert.

wenn Sie Ihre Direktive definieren, sollte sie auf E beschränkt sein und wenn Sie sie dann auf Seite hinzufügen

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