AngularJS - 在没有jQuery的指令中添加HTML元素给dom [英] AngularJS - add HTML element to dom in directive without jQuery

问题描述

我有一个AngularJS指令，我想在该指令的当前元素中添加一个svg标签。现在我在jQuery的帮助下做到这一点。

I have an AngularJS directive in which I want to add a svg tag to the current element of the directive. Right now I do this with the help of jQuery

link: function (scope, iElement, iAttrs) {

    var svgTag = $('<svg width="600" height="100" class="svg"></svg>');
    $(svgTag).appendTo(iElement[0]);

    ...
    }

然而我没有希望该指令依赖jQuery完成这个简单的任务。我怎样才能完成与AngularJS的手段（或原生JavaScript代码）相同的功能。

Yet I don't want the directive to depend on jQuery for this simple task. How would I accomplish the same with AngularJS means (or native JavaScript code).

推荐答案

为什么不尝试简单（但功能强大） html（）方法：

Why not to try simple (but powerful) html() method:

iElement.html('<svg width="600" height="100" class="svg"></svg>');

或追加 p>

Or append as an alternative:

iElement.append('<svg width="600" height="100" class="svg"></svg>');

当然，更清晰的方式：

And , of course , more cleaner way:

 var svg = angular.element('<svg width="600" height="100" class="svg"></svg>');
 iElement.append(svg);

小提琴： http://jsfiddle.net/cherniv/AgGwK/

这篇关于AngularJS - 在没有jQuery的指令中添加HTML元素给dom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！