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

How to dynamically nest a directive element in-between existing parent and child directive elements?

本文关键字：指令 元素 之间 嵌套 动态      更新时间：2023-09-26

背景：

我正在使用一个自定义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项包装在名为"容器项"的指令元素中，然后手动$编译这些项。所以，我尝试了一下，但我得到了一个错误，该错误与内部已经有带transcluded内容的指令的项目有关。"ngTransclude"有些出乎意料。我认为这与已经处理的内部指令有关。

我会选择您的第一个选项，并在角度编译之前操作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，而不必担心重新编译或重新链接指令。

[编辑]

感谢比亚乔的以下编辑。

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

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

例如：

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