如何在现有父指令元素和子指令元素之间动态嵌套指令元素？

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