Angular的$compile用于动态内容

Question

在Angular 1.5中，我想使用一个通用的"overlay"组件来显示模态中的其他组件。我想传入其他组件在覆盖内渲染。

我想我可以使用$compile在我的控制器，但组件不渲染:

In my controller:

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);
                }