如何在组件/指令中动态生成组件?

Question

我想为不同的angularjs组件创建一个包装器。该包装器有一些有html代码和一些常用函数。

<div class="wrapper">
<h1>{{header}}</h1>
<!--place for a component that has been passed through bindings-->
</div>

所以理想情况下，我想将子组件的名称传递给这个组件并让它呈现它。我怎样才能做到这一点？

Answer 1

不确定您可以通过传递组件名称来实现这一点，但您绝对可以使用 AngularJS transclude 指令

例如：

.JS

var app = angular.module('AppModule', []);
app.directive('wrapperDir', function () {
return {
restrict: 'E',
template: '<div class="wrapper">' +
'<h1>Example transclude</h1>' +
'<div ng-transclude></div>' +
'</div>',
transclude: true,
scope: {}
};
});

.HTML

<div ng-app='AppModule'>
<wrapper-dir>
<h2>Content to transclude</h2>
<div>Other stuff, including other directives</div>
</wrapper-dir>
</div>

JSFiddle 示例在这里