如何作爲一個屬性添加一個角指令子節點

Question

我有一個自定義的角度指令包裝一個HTML元素：

<my-directive-1> 
    <div some-attribute="some value">My original content</div> 
</my-directive-1> 

代碼編譯添加另一個指令，以子節點的屬性：

<div some-attribute="some value" my-directive-2>My original content</div> 

這樣myDirective2的控制器將在子節點上被觸發。

這怎麼辦？

Answer 1

在這種情況下使用$compile，這樣Angular知道它是一個指令。 Angular會編譯這個，承認有些東西需要爲範圍編譯，例如指令，數據和其他東西。

首先，用新的HTML覆蓋HTML元素。其次，使用$compile來編譯與Angular相關的新內容，與scope相關。

app.directive('myDirective1', ['$compile', function ($compile) { 
    return { 
     link: function (scope, element) { 
      element.html('<div some-attribute="some value" my-directive-2>My second content</div>');    
      $compile(element.contents())(scope); 
     } 
    } 
}]); 

app.directive('myDirective2', ['$compile', function ($compile) { 
    return { 
     link: function (scope, element) { 
      element.html('<div some-attribute="some value">My final content after two directives</div>'); 
      $compile(element.contents())(scope); 
     } 
    } 
}]); 

WORKING EXAMPLE