angularjs socials share buttons troubles the display is only in one page

Question

I'm going mad with a simple embedded of social buttons. Put it in this way I've got two states home and blog with this code

home

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

blog

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

The problem is that the I see them only in the home page if I get rid off of them in home I can see them in the blog state

Do you know what could be the problem ?

Answer 1

UPDATE: I've updated the below directives and registered them on bower with the package name 'angulike', for full details and a working demo go to http://jasonwatmore.com/post/2014/08/01/AngularJS-directives-for-social-sharing-buttons-Facebook-Like-GooglePlus-Twitter-and-Pinterest.aspx

---

The problem is that the social buttons only get initialized on page load by default, so in an angularjs app you need to re-initialize the buttons yourself when the view changes. I got them working by creating a directive for each, below is the code:

Google Plus Button Directive

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

Tweet Button Directive

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 Like Button Directive

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 to use the directives

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

Answer 2

If I understand, probably you should remove the script in blog state template. Anyway, I can share how I do in my sample project:

1. index.html
2. directive for social buttons
3. template for social buttons

basically in index there are scripts for social buttons available for all states