Dynamic Raphael Object with Directive

[Miguel Bermudez]

Hi, 

So i'm having an issues with generating a Raphael object (a rect in this case) and adding a directive to it. Here's what I'm talking about: 

http://plnkr.co/edit/RarJItLbrXdDrWLeJghh

The goal of this is to be able to use a Bootstrap popover on the rect but I can't even get the link function in the directive to fire. I feel like i'm missing a step. Any ideas would be very much appreciated it. 

Thanks! 

-miguel

[Clint Checketts]

Your directive has restrict: 'AC' so you need to use it as an attribute or class on the element:

 <div rfp id="paper"></div>

After doing that I see the link being called.

-miguel

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Joshua Miller]

Hello!

There are a few issues with your Plunker. First, it's bad practice to reference the DOM in a controller. All that Raphael stuff belongs in its own directive.

But the reason your second directive isn't working is because the HTML has to be compiled. When you generate stuff outside the confines of HTML, you have to compile it to make AngularJS aware of it. I saw that you added a call to "$apply" - that's along the same lines, but that is for events in the $digest cycle (like $watches) and not for the $compile, wires the DOM into it.

Here is a modified Plunker: http://plnkr.co/edit/wzmdRDkPwDcyaWmXpk1z?p=preview. Check the console to see the directive actually ran. I removed the HTML binding of that property as you'll need some more wiring (perhaps a service) that are based on your use case to make that work. If you provide me some more details on what you're trying to do, I can point you in the right direction.

Also, as an FYI: Raphael is not an SVG library but it will render SVG in all modern browsers. SVG doesn't behave like the HTML DOM, so some jqLite and jQuery functions just won't work against SVG elements - for example, hasClass, addClass, and removeClass will all not function at all. When you run a directive inside SVG, you'll find there is a lot of trickiness to working with SVG. Some of this Raphael tries to ease, but I found Raphael to be quite burdensome.

But as it turns out, I'm currently writing an SVG library for AngularJS as I got too frustrate with Raphael and d3 was too data-centric. I should have something primitive to share in a few days that may interest you. So far, I've created pie charts, bar graphs, and a timeline with it, all with interactivity from CSS3. It's pretty cool. :-)

Josh

-miguel

--

[paul]

Hi,

Sorry for the late reply.
I would be very interested in such an SVG libray for AngularJS.
Have you made any progress on this ? Thanks a lot.