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  function  scope  iElement  iAttrs         var svgTag       lt svg width  600  height  100  class  svg  gt  lt  svg gt           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

User · Answer

If your destination element is empty and will only contain the <svg> 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 = '<svg width="600" height="100" class="svg"></svg>';

    ...
}

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

<!-- start of directive template code -->
...
<!-- end of directive template code -->
<div ng-bind-html="svgTag"></div>

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.

User · Answer

Why not to try simple  but powerful  html   method   iElement html   lt svg width  600  height  100  class  svg  gt  lt  svg gt       Or append as an alternative   iElement append   lt svg width  600  height  100  class  svg  gt  lt  svg gt       And   of course   more cleaner way    var svg   angular element   lt svg width  600  height  100  class  svg  gt  lt  svg gt      iElement append svg     Fiddle  http   jsfiddle net cherniv AgGwK

User · Answer

You could use something like this  var el   document createElement  svg    el style width  600px   el style height  100px        iElement 0  appendChild el

User · Answer

In angularJS  you can use angular element which is the lite version of jQuery  You can do pretty much everything with it  so you don t need to include jQuery   So basically  you can rewrite your code to something like this    link  function  scope  iElement  iAttrs      var svgTag   angular element   lt svg width  600  height  100  class  svg  gt  lt  svg gt       angular element svgTag  appendTo iElement 0

[javascript] AngularJS - add HTML element to dom in directive without jQuery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to angularjs