Embed script in template

1

Hi, complete ionic noob here so please be gentle with me :smile:
I need to display a value and chart widget in a page in my app, the widgets are available as embeddable objects from a IoT cloud service provider, here is the code they provide

<script id="GblId5187" type="text/javascript">
    function getEmbedMetaDataGblId5187() {
        return {
            "apiKey": 'apikey here',
            "orgUid": 'uid here',
            "dashUid": 'dash uid here',
            "widgetUid": 'widget id here',
            "cType": 'http',
            "embedHeight": 180,
            "embedWidth": 364,
            "embedBorder": false
        };
    }
</script>
<div id="embedWidgetDivGblId5187"></div>
<script type="text/javascript" src="https://www.grovestreams.com/js/embed.js"> </script>

I have tried including this both in index.html and in templates/mypage.html but nothing gets the widget to render in the app. I tried putting the script parts in index.html and just the div in the content area of my page, still no dice. I tried the script outside the ion-content tags, nada.

it renders fine if I put all of it in a straight html file and open in a browser.

I think I’m missing something fundamental here, I guess you can’t just include bits of html inside of ion-content and expect it to be rendered and processed in your app just like in a browser?

sorry for a total noob question and thanks for any help in advance

2

I’m currently experiencing the same issue. Did you find a fix @mtnbrit?

3

Check this pen http://codepen.io/anon/pen/KwGaNq

4

Thanks for this, I basically have the same thing, I put the script id=“GblIdxxxx” near the top of index.html, I put the embed widget div inside of an ion-content in the templates/page.html file, and the link to pull in the embed.js script at the end of index.html.

When I first load the page.html, its blank, but then when I refresh it (assuming I’m in a browser), the widgets load fine. Its hard to refresh the page in an app though, so it stays blank.

5

So i hacked vicmota’s codepen to add one of my widgets and it broke in the same way, it seems the issue is triggered when you have more than one script GlbIdxxxx definition. i need 6 embedded widgets in my page.

I also notice that this radial widget seems to load just fine every time (when its the only one defined), but if I try to use a digits widget or chart widget, even singly, they don’t load until a refresh. could be a bug on the grovestreams embed api.

6

It might be incompatible with the way AngularJS loads scripts and pages. I was trying to make the loading order change with no success.

Good luck with that.

7

so i researched angular and loading scripts, seems its quite the minefield. i tried this solution with no luck at all.

any ionic gurus care to shed light on including script in index.html or in the partials?

8

We’re you able to resolve this issue, and if so I could really use a solution. Thanks in advance! By the way I as well tried that Stack solution with no success.