AngularJS дочерние компоненты

Question

Как можно иметь вложенные компоненты с AngularJS, то есть:

var parentComponent = {
    template: `<div class='parent'>CHILD HERE</div>`
};

var childComponent = {
template: `<h1>Child Component</h1>`,
}

angular.module('demoApp', [])
.component('parent', parentComponent)
.component('child', childComponent)

HTML будет:

<div ng-app="demoApp">
    <parent>
        <child></child>
    </parent>
</div>

Рендеринг будет: <div class='parent'><h1>Child Component</h1></div>

JSFIDDLE: https://jsfiddle.net/2qbky4eu/2/

Answer 1

Это можно сделать с помощью свойства transclude.

var parentComponent = {
    template: `<div class='parent'><ng-transclude></ng-transclude></div>`,
    transclude: true
};

var childComponent = {
template: `<h1>Child Component</h1>`,
}

angular.module('demoApp', [])
.component('parent', parentComponent)
.component('child', childComponent)

https://jsfiddle.net/du4oLr9z/