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”的指令元素中，然后$手动编译项目。所以，我尝试了这个，但是我得到了一个错误，该错误与已经包含了被转换内容的指令相关。关于“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，而不必担心重新编译或重新链接指令。

[编辑]

感谢Biagio进行以下编辑。

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

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

例如：

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

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

1 个答案: