1

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

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

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

2 回答 2

5

我目前正在开发一个 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>
于 2013-10-23T12:23:08.150 回答
4

我忘记了 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

于 2013-05-16T23:52:22.163 回答