Javascript AngularJS指令，该指令使用模板中的原始元素类型

我正在为Angular开发基于UI和排版的指令。在这种情况下，指令所应用的元素是未知的——从div、span、h1到h5

使用模板的原因是，我可以将

ng-*

指令添加到模板中（因此开发人员不需要记住任何东西，只需要记住指令名）

我在添加属性和重新编译元素方面的成功有限。但是，在添加

ng transclude

时没有成功。创建新元素并替换旧元素会带来集成问题（忽略元素上的其他指令和数据属性），但复制这些属性并将其添加到新元素中几乎没有成功

这看起来应该很简单，因为

模板

本身可以将元素更改为您指定的任何内容（使用

transclude

和

replace

），当然还有“很长的路要走”

很遗憾，你不能做到以下几点：

module.directive( 'myDir', [ '$window', function( $window ) {
    return {
        restrict: "A",
        controller: function( $scope, $element ) {
            $scope.tag = $element[0].nodeName;
        }
        template: "<{{tag}} data-ng-transclude ng-*=''></{{tag}}>",
        transclude: true,
        replace: true,
        link: function ( scope, element, attrs ) {

        }
    }   
}]);

与

---

这就引出了使用许多

ng-*

指令的好处的问题？这仅仅是“角度的方式”吗？

我已经仔细考虑了这个问题好几个星期了，直到我意识到

模板

可能是一个能够访问

元素

和

属性

的函数。因此，我能够返回一个带有现有元素标记的模板

module.directive( 'myDir', [ '$window', function( $window ) {
    return {
        restrict: "A",
        template: function( element, attrs ) {
            var tag = element[0].nodeName;
            return "<"+tag+" data-ng-transclude ng-*=''></"+tag+">";
        },
        transclude: true,
        replace: true,
        link: function ( scope, element, attrs ) {

        }
    }   
}]);

module.directive（'myDir'，['$window'，function（$window）{
返回{
限制：“A”，
模板：函数（元素、属性）{
var tag=元素[0]。节点名称；
返回“”；
},
是的，
替换：正确，
链接：函数（范围、元素、属性）{
}
}   
}]);

HTML

一些其他的东西
更多的东西

输出

一些其他的东西
更多的东西

element[0].style.fontSize = scope.fontSize;

module.directive( 'myDir', [ '$window', function( $window ) {
    return {
        restrict: "A",
        template: function( element, attrs ) {
            var tag = element[0].nodeName;
            return "<"+tag+" data-ng-transclude ng-*=''></"+tag+">";
        },
        transclude: true,
        replace: true,
        link: function ( scope, element, attrs ) {

        }
    }   
}]);

<div data-my-dir>
    <span>some other stuff</span>
    <div>more stuff</div>
</div>

<span data-my-dir></span>

<h1 data-my-dir></h1>

<div ng-*="" data-ng-transclude="" data-my-dir="">
    <span class="ng-scope">some other stuff</span>
    <div class="ng-scope">more stuff</div>
</div>

<span ng-*="" data-ng-transclude="" data-my-dir=""></span>

<h1 ng-*="" data-ng-transclude="" data-my-dir=""></h1>