javascript - 如何使用自定义 Angular Directive(指令)包含子元素？

Question

当前 HTML

<g class='entity'>
  <rect />
  <circle />
  ...
</g>

新的/所需的 HTML

<box>
  <rect />
  <circle />
  ...
</box>

简单指令

app.directive('box', ['$document', function ($document) {
    return {
        restrict : 'E',
        replace: true,
        template: "<g class='entity'></g>"
    };
}]);

DOM 中的结果

<g class='entity'>... everything missing here ... </g>

我希望将子子元素保留在适当的位置。

Answer 1

您正在寻找的称为嵌入。 如果您将 transinclude: true 添加到指令定义中，所有子元素都将保留。模板将仅覆盖 box 元素，但保留内部内容。

app.directive('box', ['$document', function ($document) {
return {
    restrict : 'E',
    replace: true,
    transclude: true,
    template: "<g class='entity'></g>"
};

}]);