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

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 元素的最佳方法有建议？

一些想法：

我认为在编译之前通过 Angular 操作 DOM，但我想知道在 Angular 的框架内是否有办法做到这一点。

另一个选项来自容器指令的后链接功能，我可以将 HTML 项包装在称为“container-item”的指令元素中，然后手动 $compile 这些项。所以，我尝试了这个，但我得到了一个错误，它与内部已经包含指令的项目相关，并且包含了嵌入的内容。关于“ngTransclude”的一些事情是出乎意料的。我认为这与已经处理的内部指令有关。

Answer 1

我会选择您的第一个选项，并在 Angular 编译之前操作 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>');
        }
    }
});

父指令总是在子指令之前编译，因此您可以在 compile 属性中更改子指令的 DOM，而不必担心重新编译或重新链接指令。

[编辑]

感谢 Biagio 的以下编辑。

此方法不应与带有模板的指令一起使用，因为该元素将被分配给模板而不是子元素。

另一种选择是在 Angular 生命周期开始时运行的函数中进行 DOM 操作。

例如：

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