Angular $compile 动态内容

Question

使用 Angular 1.5，我想使用通用 "overlay" 组件在模式中显示其他组件。我想传入其他组件以在叠加层中呈现。

我想我可以在我的控制器中使用 $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);
                }

Angular $compile 动态内容

Angular $compile for dynamic content

angularjs

angularjs-compile

angularjs-components

angularjs-1.5