angularjs - 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/

标签： angularjs

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/