社交网站分享按钮麻烦显示只有一页

Question

我因为一个简单的社会按钮而发疯。这样说吧，我有两个州--主页和博客--这段代码

首页

<div id="socials-bar" class=" clearfix">
        <ul class="pull-right">
            <li>
                <div class="fb-like" data-href="http://mydomain.com" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
            </li>
            <li>
                <a href="http://mydomain.com" class="twitter-share-button" data-via="mydomain" data-lang="it" data-related="mydomain" data-hashtags="mydomain">Tweet</a>
            </li>
            <li>
                <div class="g-plusone" data-size="small" data-annotation="inline" data-width="120" data-href="http://mydomain.it"></div>
            </li>
        </ul>
    </div>
//other html
<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>
<script>
    window.___gcfg = {lang: 'it'};
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>

博客

<div class="clearfix">
    <ul class="article-socials pull-right">
        <li>
            <div class="fb-like" data-href="http://mydomain.it/blog/{{article.id}}/{{article.slug}}" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
        </li>
        <li>
            <a href="http://mydomain.it/blog/{{article.id}}/{{article.slug}}" class="twitter-share-button" data-via="mydomain" data-lang="it" data-related="mydomain" data-hashtags="mydomain">Tweet</a>

        </li>
        <li>
            <div class="g-plusone" data-size="small" data-annotation="inline" data-width="120" data-href="http://mydomain.it/blog/{{article.id}}/{{article.slug}}"></div>
        </li>
    </ul>
</div>
<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>
<script>
    window.___gcfg = {lang: 'it'};
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>

问题是，我只在主页上看到他们，如果我在家里摆脱了他们，我可以在博客状态下看到他们。

你知道有什么问题吗？

Answer 1

UPDATE：我更新了下面的指令，并在bower上注册了包名'angulike'，详细信息和工作演示都要到http://jasonwatmore.com/post/2014/08/01/AngularJS-directives-for-social-sharing-buttons-Facebook-Like-GooglePlus-Twitter-and-Pinterest.aspx上去。

问题是，默认情况下，社交按钮只能在页面加载时被初始化，所以在angularjs应用程序中，当视图发生变化时，您需要自己重新初始化这些按钮。我让他们通过为每个人创建一个指令来工作，下面是代码：

Google按钮指令

app.directive('googlePlus', ['$window', function ($window) {
    return {
        restrict: 'A',
        template: '<div class="g-plusone" data-size="medium"></div>',
        link: function (scope, element, attrs) {
            scope.$watch(function () { return !!$window.gapi; },
                function (gapiIsReady) {
                    if (gapiIsReady) {
                        $window.gapi.plusone.go(element.parent()[0]);
                    }
                });
        }
    };
}]);

按钮指令

app.directive('tweet', ['$window', function ($window) {
    return {
        restrict: 'A',
        template: '<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>',
        link: function (scope, element, attrs) {
            scope.$watch(function () { return !!$window.twttr; },
                function (twttrIsReady) {
                    if (twttrIsReady) {
                        $window.twttr.widgets.load(element.parent()[0]);
                    }
                });
        }
    };
}]);

Facebook就像按钮指令

app.directive('fbLike', ['$window', function ($window) {
    return {
        restrict: 'A',
        template: '<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>',
        link: function (scope, element, attrs) {
            scope.$watch(function () { return !!$window.FB; },
                function (fbIsReady) {
                    if (fbIsReady) {
                        $window.FB.XFBML.parse(element.parent()[0]);
                    }
                });
        }
    };
}]);

HTML使用指令

<div data-fb-like=""></div>
<div data-tweet=""></div>
<div data-google-plus=""></div>

Answer 2

如果我理解，也许您应该删除博客状态模板中的脚本。无论如何，我可以在我的示例项目中分享我的工作：

1. index.html
2. 社会按钮指令
3. 社交按钮模板

基本上，在索引中，所有州都可以使用社会按钮的脚本。