8

我在使用 Angular 在我的网站上实现一个不起眼的推文按钮时遇到问题。我已经做了一些研究，并找到了一些使用 jQuery 的 AJAX 站点的解决方案，但据我所知，使用该解决方案（如下）将涉及在控制器外部运行脚本，因此将是非 Angular 和坏事。

有没有人以 Angular 的方式解决了这个问题或有任何提示？

谢谢。

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();

取自： 无法使用 Ajax 更新推文按钮

4

2 回答 2

7

这是一个可以帮助你的要点：https ://gist.github.com/Shoen/6350967

指令.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
                            }
                        );
                });
            }
        }
    }
]);

索引.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>
于 2013-10-16T07:55:25.663 回答
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 按钮工作。

于 2014-10-16T22:27:28.633 回答