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

Question

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

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!

javascript
angularjs

Answer 1

To the best of my knowledge, Angular will port attributes to the new element automatically. No need to iterate over them all yourself.

In your case, you would also need to transclude the content if you want to keep it.

app.directive('myText', function() {
    return {
        replace: true,
        template: '<text ng-transclude></text>'
    }
});

This is from the top of my memory, but I believe something similar to this would do the trick. Every attribute of the original element will be ported to the new element, and the element's content will be transcluded too. Binds preserved and all.

Answer 2

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/