0

I have a simple angularjs application with a pretty standard ng-view as follows:

    <div id="myContent">
        <div ng-view></div>
    </div>

My home page partial contains a twitter list:

<div class="container">
 <a class="twitter-timeline" width="1200" height='450' data-chrome="noheader nofooter noborders transparent"
data-tweet-limit="1" href="https://twitter.com/....."
data-widget-id="123.....">Tweets from
https://twitter.com/abc/def</a>
 <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.async=true;
                js.src = p + "://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");</script>
    </div>

This works great on the first time the partial is accessed, the twitter list is rendered after a few seconds, but on subsequent returns to the partial the twitter list does not render unless I do a page refresh, and simply shows a link :Tweets from https://twitter.com/abc/def.

Is there a way that I could invoke a refresh of the twitter list in my controller? I could add it to a $timeout to invoke the widget once the page is rendered, but what function do I invoke to make the widget render?

Else do I need to query the twitter api directly (which I would like to avoid), and get the data directly ?

ArnonZ
  • 3,822
  • 4
  • 32
  • 42
Carl
  • 1,266
  • 10
  • 20
  • 2
    Why not encapsulate it in a service? – Zack Argyle Mar 05 '14 at 01:15
  • I would prefer to use the twitter markup, since its much easier than accessing the API myself, and I won't have to worry about updating styling and linking. – Carl Mar 06 '14 at 14:44
  • Eventually I have fixed this by reading up here: https://dev.twitter.com/discussions/890 – Carl Mar 13 '14 at 20:59
  • @Carl Could you comment a bit about what you did to enable this? – Squrler Apr 09 '14 at 13:46
  • In the controller for the partial, I injected the $timeout: controller('MyCtrl1', ['$scope','$http','$document', '$timeout', function ($scope, $http, doc, $timeout) { and added this line $timeout = twttr.widgets.load(); I think the code could be improved to check for the 'twttr' variable first, but it it works as is. – Carl Apr 10 '14 at 15:16

0 Answers0