2013-10-16 10 views
7

私のサイトでは、Angularを使用して謙虚なつぶやきボタンを実装する際に問題が発生しています。私はいくつかの調査を行い、jQueryを使用してAJAXサイトのいくつかのソリューションを見つけましたが、ソリューションを使用して(以下を参照)、コントローラ外のスクリプトを実行する必要があるため、非角型と悪いことがあります。Twitterのボタンを角をつけて実装する方法

この問題を誰かが角度の方法で解決したのか、それともどのようなヒントがありますか?

ありがとうございました。 AJAX用

ソリューション:から撮影

//adding button to dom 
$('#tweetbutton').append('<a class="twitter-share-button" href="http://twitter.com/share" data-url="http://www.google.nl>Tweet</a>'); 
//loading widgets 
$.getScript('//platform.twitter.com/widgets.js', function(){ 
//calling method load 
twttr.widgets.load(); 

Cannot update tweet button with Ajax

答えて

7

はここであなたを助けるかもしれない要点です:https://gist.github.com/Shoen/6350967

directive.js

directives.directive('twitter', [ 
    function() { 
     return { 
      link: function(scope, element, attr) { 
       setTimeout(function() { 
         twttr.widgets.createShareButton(
          attr.url, 
          element[0], 
          function(el) {}, { 
           count: 'none', 
           text: attr.text 
          } 
         ); 
       }); 
      } 
     } 
    } 
]); 

index.htmlを

<script src="http://platform.twitter.com/widgets.js"></script> 

<a twitter data-text="Your text: {{file.name}}" data-url="http://127.0.0.1:3000/{{file.link}}"></a> 
+0

ありがとうございました。データをページ読み込み時にロードしないと、あなたが示唆している方法が理想的ではないので、私はこのままにしておきます。それでも良い答えです! – axzr

0

私は似たFacebookの溶液からページを取り、次のようにこれを実装することができました。あなたのビューで

、標準のリンクボタンの構文を使用します。

<a href="https://twitter.com/share" class="twitter-share-button" data-text="Here's something cool">Tweet</a> 

その後、あなたのコントローラー(あるいはあなたのアプリロード中)にあなたがページに適切に必要なJavaScriptを注入するために、次のコードを使用します。

// Load twitter sharing button 
    (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')); 

これはコードをページに正しく挿入し、Twitterボタンが動作するようにします。

+0

が機能しません。最初の読み込みのみです。 – marukobotto

関連する問題