AngularJS - add HTML element to dom in directive without jQuery

Question

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: functio         


        

Answer 1

If your destination element is empty and will only contain the tag you could consider using ng-bind-html as follow :

Declare your HTML tag in the directive scope variable

link: function (scope, iElement, iAttrs) {

    scope.svgTag = '';

    ...
}

Then, in your directive template, just add the proper attribute at the exact place you want to append the svg tag :

...

Don't forget to include ngSanitize to allow ng-bind-html to automatically parse the HTML string to trusted HTML and avoid insecure code injection warnings.

See official documentation for more details.