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

Question

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

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

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

Answer 1

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

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

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

推特的例子：

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

Answer 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，然后将它追加到它应该的位置。

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