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文件,它可以很好地工作.

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>