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

1 个答案: