/ / Чому я повинен встановлювати "trasnclude: true" у кутовому DDO? - angularjs, angularjs-директива, переключення

Чому я повинен встановити "trasnclude: true" в кутовому DDO? - angularjs, angularjs-директива, включення

Я знаю що transclude: true робить, але я завжди цікавився: "чому я повинен ставити transclude: true в моєму DDO, а також ng-transclude в моєму шаблоні? ".

Що відбувається всередині, що змушує кут бути надмірним? Це захист безпеки / захисту XSS?

Відповіді:

1 для відповіді № 1

The ngTransclude документації пояснює поділ двох (акцент міна):

[ngTransclude - це] директива, яка позначає точку вставки для включеної DOM найближчий батько директива, яка використовує переключення.

Це означає:

  • transclude: true вказує, що директива робить її вміст доступним для виключення.

  • ng-transclude вказує, куди повинен переходити вміст.

Директива з включеним переключенням насправді не повинна обробляти власний контент. Це може дозволити дочірньому елементу вибирати, куди розмістити зміщений вміст.

Ось (тривіальний) приклад, який показує, як можна переробляти трансклюзія директивою щодо дитини всередині батьків:

<!-- 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>

Ось так буде відображатися вміст на сторінці:

<!-- 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>

1 для відповіді № 2

Існує три види виключення залежно від того, чи потрібно виключати лише вміст елемента директиви, весь елемент або кілька частин вмісту елемента:

  • true - включити вміст (тобто дочірні вузли) елемента директиви.
  • "element" - включити весь елемент директиви, включаючи будь-які директиви щодо цього елемента, які визначені з нижчим пріоритетом, ніж ця директива. При використанні властивість шаблону ігнорується.
  • {...} (хеш об'єкта): - відображення елементів вмісту на "слоти" включення в шаблон.

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