Twitter share button as AngularJS directive.

directives.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>

What is the point of the Timeout? Just curious.

Probably to wait for attr.text to be loaded by angular so it's not something like {{tweetText}}

This should probably use $timeout instead of setTimeout so that it waits for the next digest cycle rather than the next browser frame.

How can we use a custom image?

@buffala You can send an image url in the tweet string or make sure that the article you are linking to contains the appropriate twitter meta data for the image to be picked up. Other than that you are out of luck unless you want to use the API.

How can I change the style of the button?