Embed.ly Twitter 小部件内的角度数据绑定不起作用答案

【问题标题】：Angular Data Binding Inside an Embed.ly Twitter Widget Not WorkingEmbed.ly Twitter 小部件内的角度数据绑定不起作用
【发布时间】：2015-02-12 06:08:15
【问题描述】：

您好，我正在尝试使用 Angular 构建一些东西，您可以在其中提交推文的 url，它将嵌入推文。我以为我可以将把手粘在 embedly 的 twitter 小部件中，但它不起作用。这可能与事件触发的顺序有关。

这是代码

<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>

这是result

如您所见，我尝试了几种不同的方法，当它只粘贴了 url 但没有粘贴角度数据时它可以工作。虽然当您单击“嗨”和“为什么”链接时，它们确实会将您带到正确的位置。

这是inspecting the page

有效的创建了整个 iframe，但其他的只是普通链接。

还应该说有一个嵌入脚本，我放在标题中

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

非常感谢任何帮助。我真的不知道角度，我只是想玩一下并了解一下。我想也许我现在是。谢谢。

【问题讨论】：

似乎 twitter 小部件渲染在 Angular DOM 渲染之前，也许这就是为什么 twitter 小部件无法理解属性href
是的，我也在想同样的事情，我想知道是否有任何方法可以延迟小部件脚本的运行。
你可以参考这些项目1 2如何处理渲染问题，希望它有效。
酷，我会看看 thx
我已经发布了我的答案。您可能希望将其标记为正确，然后有类似问题的其他人可以知道如何进行故障排除:)

标签： javascript angularjs twitter

【解决方案1】：

您遇到的问题是在 Angular 渲染 DOM 元素之前嵌入渲染元素，这意味着嵌入可能不知道 href 实际上是什么并且它停止渲染并且什么都没有留下。

您可以参考这些项目1 2了解如何处理渲染序列。

【讨论】：

没有任何运气在那里运行必须有更简单的方法
我不能延迟嵌入脚本的运行直到 DOM 加载完成

【解决方案2】：

所以我最终只是用这个 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);

我在这里找到https://stackoverflow.com/a/9611751/927591

【讨论】：