current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 9 down vote favorite
6

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 dont want the directive to depend on jquery for this simple task. How would I accomplish the same with angular means (or native javascript code). Thanks

share|improve this question

3 Answers 3

up vote 11 down vote accepted

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/

share|improve this answer
1  
thanks that did the trick - new to angularjs ... thanks again –  dorjeduck Oct 21 '13 at 8:00
1  
@dorjeduck you welcome , take a look at jsFiddle link that i attached –  Cherniv Oct 21 '13 at 8:04
up vote 2 down vote

You could use something like this

var el = document.createElement("svg");
el.width=600;
el.height=100;
....
iElement[0].appendChild(el)
share|improve this answer
    
Thanks pavel for the answer. I tried this yet all I get is "<svg></svg>" in the dom without the width,height attributes (in google chrome) –  dorjeduck Oct 21 '13 at 7:54
    
you need Element.style.width –  Kayo Oct 21 '13 at 7:55
    
Thanks Kayo. I just tried el.style.width=600; but still no success, guess I misunderstood your answer –  dorjeduck Oct 21 '13 at 7:57
up vote 2 down vote

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('<svg width="600" height="100" class="svg"></svg>');
  angular.element(svgTag).appendTo(iElement[0]);
  //...
}
share|improve this answer
    
Thanks a lot nXqd, that does it indeed. (I already accepted Cherniv's answer...) Thanks for pointing this possibility out to me, will be helpful for more complicated stuff I am sure ... –  dorjeduck Oct 21 '13 at 8:13
1  
btw, if you need to squeeze every ms, you should use the native function from html, but hopefully it does work cross browser. Btw, you can unaccept it :P [ just kidding ] –  nXqd Oct 21 '13 at 8:15
    
your code doesn't work, but mine does :D jsfiddle.net/cherniv/78tKx –  Cherniv Oct 21 '13 at 8:25
    
angular.element does not have .appendTo docs.angularjs.org/api/ng/function/angular.element –  Darren Nov 15 '14 at 23:44
    
..but it does have append so just switch parent/child situation –  Darren Nov 16 '14 at 0:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.