Почему я должен установить "trasnclude: true" в Angular DDO?

Question

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

Что происходит внутри, что заставляет angular быть избыточным? Это безопасность /XSS защита? Спектакль?

Answer 1

Документация ngTransclude объясняет их разделение (выделено мной):

[ngTransclude является директивой], которая отмечает точку вставки для включенного DOM ближайшей родительской директивы, которая использует transclusion.

Это означает:

• transclude: true указывает, что директива делает ее содержание доступным для включения.

• ng-transclude указывает, куда должен идти контент.

Директива с включенным включением на самом деле не должна обрабатывать включение своего содержимого. Это может позволить дочернему элементу выбирать, куда поместить включенный контент.

Вот (тривиальный) пример, который показывает, как transclusion может быть обработано дочерней директивой внутри родителя:

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

Answer 2

Существует три вида включения в зависимости от того, хотите ли вы включить только содержимое элемента директивы, весь элемент или несколько частей содержимого элемента:

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

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