Angular $compile 用于动态内容

Question

使用 Angular 1.5，我想使用通用的“覆盖”组件来显示模式中的其他组件。我想传入要在叠加层中呈现的其他组件。

我以为我可以在我的控制器中使用 $compile，但是组件没有渲染：

在我的控制器中：

ctrl.appendComponent = function(component_type) {
    ctrl.$content.empty(); // this is the overlay element
    var component = '<' + component_type + '></' + component_type + '>';
    ctrl.$content.append($compile(component)($scope));
};

我已经创建了我想要传入的组件，例如“foo”并且在 DOM 中只获取了一个空元素：

<foo></foo>

尽管，在 foo 组件的模板中，我有：

<h1>header</h1>
<p>body</p>

并期待看到：

<foo>
  <h1>header</h1>
  <p>body</p>
</foo>

Answer 1

这是一个示例，但看起来您正在做同样的事情。我建议简化您的代码，可能是某些东西没有返回您认为的内容。

                link: function(scope, iElem, tAttrs){
                            var html = "<div>hello</div>";

                            var content = $compile(html)(scope);
                            iElem.append(content);
                }