wake-up-neo.com

Was ist ng-transclude?

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

Die Beschreibung in der Dokumentation lautet wie folgt:

Direktive, die den Einfügepunkt für das übertragene DOM der nächsten übergeordneten Direktive markiert, die die Übertragung 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?

255
Code Whisperer

Transclude ist eine Einstellung, die angular) angibt, alles, was in der Direktive im Markup enthalten ist, zu erfassen und irgendwo zu verwenden(Wo eigentlich das ng-transclude ist um) in der Vorlage der Richtlinie. Weitere Informationen hierzu finden Sie unter Erstellen einer Direktive, die andere Elemente umschließt im Abschnitt Dokumentation von Direktiven .

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 Ihrem Markup setzen

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

Es würde so aussehen:

Übermensch

Zeug 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

enter image description here

Visualisiere:

enter image description here

477
The Q CS or GS

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