如何使用自定义角度指令包含子元素

How to include sub elements with custom angular directive?

本文关键字：包含 元素 指令 何使用 自定义      更新时间：2023-12-26

当前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>

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

您要查找的内容称为transclusion。如果将transclude:true添加到指令定义中，则将保留所有子元素。模板将只覆盖框元素，但保留内部内容。

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

}])；

相关文章：