dorjeduck dorjeduck - 5 months ago 51
jQuery Question

AngularJS - add HTML element to dom in directive without 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]);

...
}


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).

Answer

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

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

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

Fiddle: http://jsfiddle.net/cherniv/AgGwK/