如何在現有父指令元素和子指令元素之間動態嵌套指令元素？

Question

背景：

我正在使用自定義的CMS，我對代碼庫的訪問權限有限。所以，在少數情況下，我打算使用JavaScript進行一些DOM操作。

問題：

我有一個容器指令和容器具有普通的老HTML項目，但我不能夠標記的項目爲從服務器端的指令。此外，普通的舊HTML項目包含指令的子內容。

例子：

這裏是前：

DIV[container-directive] 

    DIV.some-item-in-html 
    DIV[some-directive-in-the-content] 


    DIV.some-item-in-html 
    DIV[some-directive-in-the-content] 

    ... 

這裏是DOM應該是什麼樣子算賬：

DIV[container-directive] 

    DIV[container-item]  <-- This is what needs to be inserted 

    DIV.some-item-in-html 
     DIV[some-directive-in-the-content] 

    DIV[container-item]  <-- This is what needs to be inserted 

    DIV.some-item-in-html 
     DIV[some-directive-in-the-content] 

    ... 

問：

有沒有人有使用JavaScript在嵌套指令之間注入DOM指令的最佳方法的建議？

的幾點思考：

我認爲操作DOM通過提前角彙編的，但我不知道是否有一種方式來角的框架內做到這一點。

另一個選擇是來自容器指令的後鏈接功能，我可以將HTML項目包裝在名爲「container-item」的指令元素中，然後$手動編譯項目。所以，我試過這個，但是我得到一個錯誤，這些錯誤與已經包含指令的內容中的內容有關。關於「ngTransclude」的一些事情是意料之外的。我認爲這與已經處理的內部指令有關。

Answer 1

我會去你的第一個選項，並在角度編譯之前操作DOM。

您可以在包含要操作的元素的指令中執行此操作。

例如：

app.directive('body', function() { 
    return { 
     restrict: 'E', 
     compile: function(element, attr) { 
      // find the inner element and wrap it 
      $('.some-item-in-html', element).wrap('<div class="container"></div>'); 
     } 
    } 
}); 

家長指令是孩子指令之前總是被編譯，所以你可以改變編譯屬性中的孩子們的DOM，而不必擔心重新編譯或重新鏈接指令。

[編輯]

感謝比亞焦爲以下編輯。

此方法不應與具有模板的指令一起使用，因爲該元素將分配給模板而不是子元素。

另一種選擇是在角度生命週期開始時運行的函數中執行DOM操作。

例如：

app.run(function(){ 
     // find the inner element and wrap it 
     $('.some-item-in-html').wrap('<div  class="container"></div>'); 
    });