Search code examples
angularjstwitterangularjs-directiveng-view

Why will my twitter widget not render if i change the view in angularjs?

Hi and thanks for reading.

I have a angular app im making and ive stumbled on a problem. set up as so

index.html-

<html ng-app="myApp">
...
<div ng-view></div>
<div ng-include="'footer.html'"></div>
...
</html>

I wont bother putting my routes its pretty simple /home is shows the /home/index.html and so on...

/home/index.html (default view when you come to the site)

<div class="responsive-block1">
<div class="tweet-me">
    <h1> tweet me </h1>
</div>

<div class="twitter-box">
    <twitter-timeline></twitter-timeline>
</div>

twitter timeline directive

directives.directive("twitterTimeline", function() {
return { 
     restrict: 'E',
     template: '<a class="twitter-timeline" href="https://twitter.com/NAME" data-widget-id="XXXXXXXXXXXXXX">Tweets by @NAME</a>',
     link: function(scope, element, attrs) {

    function run(){
        (!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"));
        console.log('run script');
    };

    run();


     }
   };
});

So I have just created a basic twitter directive using the tag from twitter. But when I change the view example to /blog then go back to /home the twitter widget no longer renders at all.

Im also using an $anchorScroll and if i jump to anyway on the page with this the widget also disappears. Any info would be great thanks.

Solution

  • See this post: https://dev.twitter.com/discussions/890

    I think that you may be able to get the widget to re-render by calling twttr.widgets.load().

    If you find that this does not work, you will need to wrap this code into $timeout in your controller:

        controller('MyCtrl1', ['$scope', '$timeout', function ($scope, $timeout) {
            $timeout = twttr.widgets.load();
    }])