AngularJS子组件

Question

如何使用AngularJS嵌套组件，即：

# in action

$ pytest -q -s --name Brian test_param.py

test_print_name(name): Brian
.test_print_name_2(name): Brian
.

HTML将是：

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)

呈现的结果将是：     <div ng-app="demoApp"> <parent> <child></child> </parent> </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/