動態內容的角度$編譯

Question

使用Angular 1.5，我想使用通用的「覆蓋」組件來顯示模態中的其他組件。我想要傳入其他組件以在疊加層中渲染。

我想我可以用$編譯在我的控制器，但該組件沒有渲染：

在我的控制器：

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