Question

following on from this question:
how to write a directive for angularjs that replaces dom elements without using ng-transclude?

I wish to write a directive that changes the dom element but then retains all the attributes and bindings.

<g:text x={{myX}} y={{myY}} font-size=10>Hello There</g:text>

to

<text x={{myX}} y={{myY}} font-size=10>Hello There</text>

thanks in advance!

Answer 1

Use the same logic and copy the attributes during the compile:

 app.directive('gText', function() {
    return {
        restrict: 'E',
        compile: function(tElement, tAttrs) {
            var attrs = tElement[0].attributes;
            tElement.replaceWith('<text>' + tElement.text() + '</text>');            
            for (var i=0; i < attrs.length; i++) {
                tElement.attr(attrs.item(i).nodeName, attrs.item(i).nodeValue);               
            }
        }
    }
});

fiddle: http://jsfiddle.net/YWfSF/