2013-10-16 2 views
7

Ich habe Probleme mit der Implementierung einer bescheidenen Tweet-Schaltfläche auf meiner Website mit Angular. Ich habe einige Nachforschungen angestellt und einige Lösungen für eine AJAX-Site unter Verwendung von jQuery gefunden, aber soweit ich feststellen kann, dass die Lösung (unten) ein Skript außerhalb eines Controllers ausführen würde, wäre sie daher nicht Angular und A Bad Thing.Wie zu implementieren Twitter Button die eckige Weise

Hat jemand dieses Problem auf eine eckige Weise gelöst oder irgendwelche Tipps, wie?

Danke.

Lösung für 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(); 

Entnommen: Cannot update tweet button with Ajax

Antwort

7

Hier ist ein Kern, die Ihnen helfen könnten: 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

Dank Manuel. Ich werde dies jedoch für eine Weile offen lassen, da die von Ihnen vorgeschlagene Methode nicht ideal ist, wenn die Daten beim Laden der Seite nicht geladen werden. Immer noch eine gute Antwort! – axzr

0

nahm ich eine Seite aus der einer ähnlichen Facebook-Lösung und konnte dies in der folgenden Weise implementieren.

Ihrer Ansicht verwenden, um die Standard-Link-Button Syntax:

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

Dann in Ihrem Controller (oder sogar in Ihrer App Last) Sie den folgenden Code verwenden, um die benötigte JavaScript, um richtig in der Seite zu injizieren:

// 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')); 

Dies wird den Code richtig in die Seite injizieren und erlauben Sie Ihrem Twitter-Button zu arbeiten.

+0

funktioniert nicht. nur zum ersten Mal geladen. – marukobotto

Verwandte Themen