1

(動的に変更する) ユーザー プロファイル ページがある 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

私は現在、Facebook、Twitter、Google+、Pinterest などのウィジェットを実装する必要がある Angular アプリに取り組んでいます。

フォームを使用せずに Facebook ボタンを機能させることはできませんでしたがiframe、他の 3 つのボタンはチャームのように機能します (続きを読む)。

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>
于 2013-10-23T12:23:08.150 に答える
4

ボタンを生成するときに、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-ching.html

于 2013-05-16T23:52:22.163 に答える