Angular Data Binding Inside an Embed.ly Twitter Widget Not Working

Question

Hi I'm trying to build something with angular where you can submit the url of a tweet and it will embed the tweet. I thought I could just stick the handlebars inside of embedly's twitter widget but it doesn't work. It's something maybe about the order in which the events are firing.

This is the code

<section data-ng-controller="ArticlesController">

{{article.title}}<p>

<a class="embedly-card" href="{{article.title}}">hi</a><p>

<a class="embedly-card" href="https://twitter.com/jashkenas/status/563803426107449347">bye</a>

<a class="embedly-card" ng-href="{{article.title}}">why</a>

</section>

And this is the result

As you can see I tried it a few different ways and it works when it just has the url pasted in there but not with the angular data. Although when you click on the hi and why links they do take you to the right place.

This is inspecting the page

The one that worked created this whole iframe but the others are just plain links.

Should also say theres an embedly script which I put in the header

<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

Any help is much appreciated. I don't really know angular, I just wanted to play around and learn a bit about it. I guess maybe I am now. Thanks.

it seems twitter widget rendering is before Angular DOM rendering, maybe that's why twitter widget can not understand attribute `href` — Rebornix, Feb 11 '15 at 04:49
yeah I was thinking the same thing, I wonder if there's any way to delay the widget script from running. — j1mmy, Feb 11 '15 at 05:05
you can refer to these projects [1](https://github.com/Urigo/angular-embedly) [2](https://github.com/lithiumtech/angular-embedly) for how to handle rendering issues, hope it work. — Rebornix, Feb 11 '15 at 05:27
I have posted my answer. You may want to mark it as correct then others who have similar issues can have an idea how to troubleshoot :) — Rebornix, Feb 11 '15 at 05:32

score 1 · Answer 1 · answered Feb 11 '15 at 05:31

1

The problem you met is that embedly renders the element before Angular renders the DOM element, which means embedly may don't know what the href actually is and it stops rendering and left nothing.

You can refer to these projects 1 2 for how to handle rendering sequence.

answered Feb 11 '15 at 05:31

Rebornix

5,272
1
23
26

not having any luck getting that running there must be an easier way – j1mmy Feb 11 '15 at 21:28
like cant i delay the embedly script from running until after the DOM loads – j1mmy Feb 11 '15 at 21:50

score 0 · Answer 2 · edited May 23 '17 at 12:23

so I ended up just delaying the embedly script loading with this js

setTimeout(function() {
    var headID = document.getElementsByTagName("head")[0];         
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = 'http://www.somedomain.com/somescript.js';
    headID.appendChild(newScript);
}, 5000);

i found here https://stackoverflow.com/a/9611751/927591

Angular Data Binding Inside an Embed.ly Twitter Widget Not Working

2 Answers2