如何编写angularjs指令，取代DOM元素，而无需使用NG-transclude？ [英] how to write a directive for angularjs that replaces dom elements without using ng-transclude?

问题描述

我希望写一个指令，基本上这个转换：

 ＆LT; G：文本＆GT;你好＆LT; / G：文本＆GT;至＆LT; SVG类=GX-文本＆GT;＆LT;文字和GT;你好＆LT; /文本＆GT;＆LT; / SVG＆GT;
 

这样在DOM中，＆LT; G：文本＆GT; 元素已经由＆LT被完全取代; SVG＆GT; 元素

我不想用NG-transclude，因为我发现，它增加了很多其他的元素到DOM。

解决方案

  VAR应用= angular.module（'应用'，[]）;
app.directive（'gText'，函数（）{
    返回{
        限制：'E'，
        编译：功能（tElement，ATTRS）{
            tElement.replaceWith（'＆LT; SVG类=GX-文本＆GT;＆LT;文字和GT;'
                + tElement.text（）+'＆LT; /文本＆GT;＆LT; / SVG＆GT;'）;
        }
    }
}）;
 

小提琴

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.

解决方案

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

这篇关于如何编写angularjs指令，取代DOM元素，而无需使用NG-transclude？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！