Was ist ng-transclude?

266

Ich habe eine Reihe von Fragen zu StackOverflow gesehen, in denen es um ng-transclude ging, aber keine hat Laien erklärt, was es ist.

Die Beschreibung in der Dokumentation lautet wie folgt:

Direktive, die die Einfügemarke für das transkludierte DOM der nächsten übergeordneten Direktive markiert, die die Transklusion verwendet.

Das ist ziemlich verwirrend. Wäre jemand in der Lage, in einfachen Worten zu erklären, was ng-transclude tun soll und wo es verwendet werden könnte?

angularjs angularjs-directive transclusion Code Whisperer
quelle
1
Es ist im Grunde ein Markierungspunkt für alles, was Sie für das bestimmte HTML-Tag oder die jeweilige Direktive einfügen. Verwenden Sie es mit einer Direktive und Sie werden es besser verstehen.
za

Antworten:

492

Transclude ist eine Einstellung, mit der Angular angewiesen wird, alles, was in der Direktive im Markup enthalten ist, zu erfassen und irgendwo (wo sich das tatsächlich ng-transcludebefindet) in der Vorlage der Direktive zu verwenden. Lesen Sie mehr dazu unter eine Richtlinie vor, dass Wraps Andere Elemente anlegen Abschnitt Dokumentation von Richtlinien .

Wenn Sie eine benutzerdefinierte Direktive schreiben, verwenden Sie ng-transclude in der Direktivenvorlage, um den Punkt zu markieren, an dem Sie den Inhalt des Elements einfügen möchten

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Wenn Sie dies in Ihr Markup einfügen 

<hero name="superman">Stuff inside the custom directive</hero>

Es würde sich zeigen wie:

Übermensch

Sachen in der benutzerdefinierten Direktive

Vollständiges Beispiel:

Index.html 

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

Geben Sie hier die Bildbeschreibung ein

Visualisieren:

Geben Sie hier die Bildbeschreibung ein

Ben Fischer
quelle
90
Dies ist eine viel bessere Beschreibung als ihre offiziellen Dokumente. Das macht mir den Kopf weh.
Capaj
4
Gute Antwort! :) Der Link, den Sie geteilt haben, hilft mir, den Prozess von zu verstehen transclude.
Paulo Oliveira
10
Angular sollte diese Erklärung anstelle der derzeit vorhandenen Dokumente verwenden.
Jeremy W
1
@codeofnode Der Kompilierungsdienst seines Winkels, hier ist der relevante Code github.com/angular/angular.js/blob/…
Ben Fischer
1
Stackoverflow-Antworten sind der beste Weg, um Winkelkonzepte zu unterschätzen
sridhar ..
1

Es ist eine Art Ausbeute, alles aus der element.html () wird dort gerendert, aber die Direktivenattribute sind in dem bestimmten Bereich noch sichtbar.

Sîrbu Nicolae-Cezar
quelle
3
Die beste Antwort, die ich denke, ist perfekt, aber wenn Sie aus einem rubinroten Hintergrund kommen, dann stimme ich zu, yieldscheint eine gute Analogie zu sein.
Apie
2
@Apie ja, ich komme aus einem rubinroten Hintergrund
Sîrbu Nicolae-Cezar