1

I am trying to use the Dojo gauges within my angularjs app; I understand that Dojo itself is a framework that offers MVC (like angularjs) but at this point, I have an angularjs app and I would like to use existing widgets from other libraries using angularjs directives.

I keep getting this error when I run my simple widget example - Uncaught TypeError: undefined is not a function - here is a plunker that shows the issue

http://plnkr.co/edit/Yzkp5r?p=preview

I am not sure where I am going wrong. I am running it inside dom ready and when the error happens, it looks like one my div element does not have the prototype set to HTMLDivElement which is weird. I am able to create the same gauge in the same fashion from the chrome console which is suggesting that I am doing something early or something is not ready at the time when my Dojo widget is being created. Just to be more specific, the error is coming from

var glossyCircular = new GlossyCircularGauge(
                                                        {
                                                            background: [255, 255, 255,    0],
                                                            title: 'Value',
                                                            id: gaugeId,
                                                            width: 150,
                                                            height: 150
                                                        },parent);

Any help is appreciated.

Thank you

user2789284
  • 751
  • 1
  • 11
  • 28
  • The plnkr doesn't look complete. – RoryKoehein Sep 01 '14 at 18:22
  • My apologies - Made a mistake with forking the plunker - http://plnkr.co/edit/Yzkp5r?p=preview works now – user2789284 Sep 01 '14 at 18:41
  • I noticed you have your answer already, but I just wanted to say that you could simplify your directive a bit, by using the element you get in the `link()` function and by adding the ID to your scope: http://plnkr.co/edit/ILl51svqwsL03X761WMs?p=preview – g00glen00b Sep 02 '14 at 06:08
  • Hi Dimitri, Thank you very much for that. That was very helpful. Could you help me understand what scope: {gaugeId: '@'} means? I see that it has bound a scope property to the id but wanted to get some more clarity on that. – user2789284 Sep 03 '14 at 17:54
  • It does exactly that: it gets the attribute from the tag and sets it on the scope, converting the dashed syntax to camelcase, of course (so 'gauge-id' becomes gaugeId). See: http://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope – RoryKoehein Sep 04 '14 at 08:23

1 Answers1

1

Dojo Query returns a DOM List, which you are passing to the GlossyCircularGauge. But you need to pass an element, which would be parent[0] in your case: http://plnkr.co/edit/Sj4madvp7Fj88VriUq23?p=preview

RoryKoehein
  • 3,113
  • 1
  • 14
  • 13