Щебетать кнопка появляется в виде ссылки в Угловые шаблоны

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

Я забыл о Iframe, нет никакой возможности на твиттере, когда вы создаете кнопку. Так оно и работает!

<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

Answer 2

В настоящее время я работаю над угловым приложением, где мне нужно реализовать такие виджеты - от Facebook, Twitter, Google+ и Pinterest.

Хотя я не смог заставить кнопку Facebook работать без использования ее формы iframe, остальные три работают как прелести (читайте дальше).

Настоящая проблема с 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>