how to write a directive for angularjs that replaces the dom element but keeps bindings

Problem

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!

Problem courtesy of: zcaudate

Solution

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/

Solution courtesy of: bmleite

View additional discussion.