Twitter follow按钮在Angular模板中显示为链接
Twitter follow按钮在Angular模板中显示为链接
提问于 2013-05-17 07:26:24
一页应用程序，其中有用户配置文件页面(您可以动态更改)。
这不起作用，它显示为链接
<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">回答 2
Stack Overflow用户
回答已采纳
发布于 2013-05-17 07:52:22
我忘记了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>同样非常重要的是: iframes更新历史记录。为了解决这个问题，我动态地生成元素iframe，然后将其appendChild到它应该在的位置。
这里有一个很好的例子：http://nirlevy.blogspot.com/2007/09/avoding-browser-history-when-changing.html
Stack Overflow用户
发布于 2013-10-23 20:23:08
我目前正在开发一个Angular应用程序，在那里我需要实现这样的小部件--来自Facebook，Twitter，Google+和Pinterest。
虽然我不使用Facebook的iframe表单就无法让Facebook按钮工作，但其他三个按钮的工作方式与charms类似(请继续阅读)。
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16599105
复制相关文章
相似问题
腾讯云开发者
