javascript - Embed.ly Twitter 小部件内的 Angular 数据绑定(bind)不起作用

Question

嗨，我正在尝试使用 Angular 构建一些东西，您可以在其中提交推文的 URL，它将嵌入该推文。我以为我可以将 Handlebars 粘贴到 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

正如你所看到的，我尝试了几种不同的方法，当它只粘贴了网址但不粘贴 Angular 数据时它就可以工作。尽管当您单击“嗨”和“为什么”链接时，它们确实会将您带到正确的位置。

这是inspecting the page

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

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

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

非常感谢任何帮助。我真的不了解 Angular，我只是想玩玩并了解一点。我想也许我现在就是这样。谢谢。

Answer 1

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

可以引用这些项目1 2了解如何处理渲染顺序。