Dlaczego muszę ustawić "trasnclude: true" w Angular DDO? - angularjs, angularjs-directive, transclusion

wiem co transclude: true robi, ale zawsze zastanawiałem się: "dlaczego muszę to powiedzieć? transclude: true w moim DDO, jak również ng-transclude w moim szablonie? ".

Co się dzieje wewnętrznie, że siły są niepotrzebne? Czy to ochrona / ochrona XSS? Wydajność?

Odpowiedzi:

The ngTransclude documentation wyjaśnia rozdzielenie dwóch (nacisk mój):

[ngTransclude to] dyrektywa, która oznacza punkt wstawienia dla dołączonego modelu DOM najbliższy rodzic dyrektywę, która używa przejęcia.

To znaczy:

• transclude: true wskazuje, że dyrektywa udostępnia swoją treść do przekształcenia.

• ng-transclude wskazuje, gdzie powinna się znaleźć zawartość.

Dyrektywa z włączoną funkcją transclusion nie musi w rzeczywistości obsługiwać transclusion jej własnej zawartości. Może pozwolić elementowi podrzędnemu wybrać miejsce, w którym ma zostać umieszczona zawarta treść.

Oto (trywialny) przykład, który pokazuje, w jaki sposób transclusion może być obsługiwane przez dyrektywę child w rodzicu:

<!-- Application template -->
<parent-el>
<h1>Transcluded content</h1>
</parent-el>


<!-- <parent-el> template -->
<p>I am the parent element</p>
<child-el></child-el>


<!-- <child-el> template -->
<p>I am the child element</p>
<div ng-transclude></div>

W ten sposób zawartość zostanie wyświetlona na stronie:

<!-- Rendered content -->
<parent-el>
<p>I am the parent element</p>
<child-el>
<p>I am the child element</p>
<div>
<h1>Transcluded content</h1>
</div>
</child-el>
</parent-el>

Istnieją trzy rodzaje łączenia w zależności od tego, czy chcesz zawrzeć tylko zawartość elementu dyrektywy, całego elementu, czy wielu części zawartości elementu:

• true - transkluduj zawartość (tzn. węzły podrzędne) elementu dyrektywy.
• "element" - przełączyć cały element dyrektywy, w tym wszelkie dyrektywy dotyczące tego elementu, które zostały zdefiniowane z niższym priorytetem niż ta dyrektywa. Gdy zostanie użyta, właściwość szablonu zostanie zignorowana.
• {...} (hash obiektu): - zamapuj elementy zawartości na "gniazda" w szablonie.

-- https://docs.angularjs.org/api/ng/service/$compile#transclusion