Twitter 关注按钮在 Angular 模板中显示为链接答案

【问题标题】：Twitter follow button appears as link in Angular templatesTwitter 关注按钮在 Angular 模板中显示为链接
【发布时间】：2013-05-12 00:50:43
【问题描述】：

一个页面应用程序，其中有用户个人资料页面（您可以动态更改）。

这不起作用，它显示为链接

<a href='https://twitter.com/{{user.twitter}}' class='twitter-follow-button' data-show-count='false' data-size='large'>Follow @{{user.twitter}}</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

如果它重新初始化代码它也不起作用

<div ng-show="user.twitter" ng-bind-html-unsafe="user.twitter|followButton">

【问题讨论】：

我也有类似的问题，但我完全被你的问题和回答弄糊涂了:(

标签： twitter angularjs twitter-follow

【解决方案1】：

我目前正在开发一个 Angular 应用程序，我需要在其中实现这些小部件 - 来自 Facebook、Twitter、Google+ 和 Pinterest。

虽然我无法在不使用 iframe 表单的情况下使 Facebook 按钮工作，但其他三个按钮就像魅力一样工作（继续阅读）。

Angular 的真正问题似乎是这些平台通常提供的异步 Javascript 代码（它动态创建一个脚本标签，调用使按钮工作所需的实际 JS 代码）。如果直接（并同步）调用正确的 JS 文件，效果很好。

Twitter 示例：

<!-- This won't work : -->

<a href="https://twitter.com/share?url={{ $myEscapedUrl }}" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>



<!-- This will (note I'm using the same URL for the script) : -->

<a href="https://twitter.com/share?url={{ $myEscapedUrl }}" class="twitter-share-button">Tweet</a>
<script src="//platform.twitter.com/widgets.js"></script>

【讨论】：

起初为“关注”按钮工作，但后来我突然有两个相同的按钮并排在一起......现在尝试了@mïchael-makaröv 的解决方案，它到目前为止工作......

【解决方案2】：

我忘记了 iframe，当你生成按钮时，twitter 上没有选项。所以它有效！

<iframe ng-show="user.twitter" allowtransparency="true" frameborder="0" scrolling="no"
              src="//platform.twitter.com/widgets/follow_button.html?screen_name={{user.twitter}}"
              style="width:300px; height:20px;"></iframe>

也很重要：iframe 更新历史。为了解决这个问题，我动态生成元素 iframe，然后将其 appendChild 到它应该在的位置。

这是一个很好的例子：http://nirlevy.blogspot.com/2007/09/avoding-browser-history-when-changing.html

【讨论】：