AngularJS directive that uses the original element type in template

Question

I\'m developing UI and typography based directives for Angular. In such cases, the element the directive is being applied on is unknown - anything from a div, span, h1 to an

Answer 1

I've been mulling over this question for a couple weeks now until I realised that template could be a function with the ability to access element and attrs. Thus I was able to return a template with the existing element tags.

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

        }
    }   
}]);

HTML

    some other stuff
    
more stuff

Output

    some other stuff
    
more stuff