CODEWITHSUNDEEP
javascriptangularjs
zcaudate
zcaudate

Reputation: 14258

how to write a directive for angularjs that replaces dom elements without using ng-transclude?

I wish to write a directive that basically transforms this:

<g:text>Hello There</g:text>

to

<svg class="gx-text"><text>Hello There</text></svg>

so that in the dom, the <g:text> element has been completely replaced by the <svg> element

I don't want to use ng-transclude as I found that it added a bunch of other elements to the dom.

Upvotes: 3

Views: 426

Answers (1)

Mark Rajcok
Mark Rajcok

Reputation: 364697

var app = angular.module('app', []);
app.directive('gText', function() {
    return {
        restrict: 'E',
        compile: function(tElement, attrs) {
            tElement.replaceWith('<svg class="gx-text"><text>'
                + tElement.text() + '</text></svg>');
        }
    }
});

​Fiddle

Upvotes: 4

Related Questions