1

背景：

我正在使用自定义 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]

  ...

问题：

有没有人对注入 DOM 元素的最佳方法提出建议，这些元素是使用 JavaScript 的指令嵌套之间的指令？

一些想法：

我认为在编译之前通过 Angular 操作 DOM，但我想知道是否有办法在 Angular 的框架内执行此操作。

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

4

1 回答 1

3

我会选择您的第一个选项，并在角度编译之前操作 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>');
  });
于 2014-06-29T22:31:09.287 回答