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
– Rebornix, Commented Feb 11, 2015 at 4:49
yeah I was thinking the same thing, I wonder if there's any way to delay the widget script from running. — j1mmy
– j1mmy, Commented Feb 11, 2015 at 5:05
you can refer to these projects 1 2 for how to handle rendering issues, hope it work. — Rebornix
– Rebornix, Commented Feb 11, 2015 at 5: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
– Rebornix, Commented Feb 11, 2015 at 5:32

Rebornix · Accepted Answer · 2015-02-11 05:31:09Z

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, 2015 at 5:31

Rebornix

5,2701 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

j1mmy Over a year ago

not having any luck getting that running there must be an easier way

j1mmy Over a year ago

like cant i delay the embedly script from running until after the DOM loads

Community · Accepted Answer · 2017-05-23 12:23:14Z

0

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

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Feb 11, 2015 at 22:08

j1mmy

416 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related