javascript - 如何在不使用 ng-transclude 的情况下为 angularjs 编写替换 dom 元素的指令？

Question

我希望编写一个基本上可以改变这一点的指令：

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

to

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

这样在dom中，<g:text>元素已经完全被<svg>元素替换了

我不想使用 ng-transclude，因为我发现它向 dom 添加了一堆其他元素。

Answer 1

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>');
        }
    }
});

​<a href="http://jsfiddle.net/mrajcok/jwzAV/" rel="nofollow">小提琴