1

Hello,

I’m running Angular 1.6x but using an older syntax just for instructional purposes.

I’m retrieving tweets from the search api and passing them into the twtter.widgets.createTweet function. In my html, I’m running an ng-repeat on all the tweets I return and passing in the tweet id to the createTweet function. It seems that every time I do this in my app, I always get back five times as many widgets as there are tweets in my array. Furthermore, when I navigate to a different state and then return to the page, the widgets continue to duplicate endlessly.

Additionally, when I navigate away from the state, I get a console log stating that the correct number of widgets was created.

Has anyone had this issue?

Here is the html (I omitted the ending carrots so that the html would show):

<div id="inner"
  <div id="embeddedTwitterTimeline"
    <div ng-repeat="tweet in vm.parent.tweets | orderBy: tweet.created_at"
      {{vm.generateTimeline(tweet.id_str)}}
    </div
  </div
</div>

Here is the function in my controller:
  function TwitterController ($scope, $state) {
    const vm = this;
    vm.parent = $scope.$parent.vm;
    vm.generateTimeline = function(tweetId) {
      twttr.ready(
        function(twttr) {
          twttr.widgets
            .createTweet(tweetId, document.getElementById('embeddedTwitterTimeline'))
            .then(function(createdTweet) {
              console.log('Successfully created a tweet widget.')
            })
            .catch(function(error) {
              console.log('Error creating tweet widget.');
            });
        }
      );
    };
  }
2

I’ve moved this to the Twitter REST API category as this is not a Fabric specific section.

3

… and I’m moving it to the Websites category since it refers to embedded timelines :slight_smile:

5

Figured it out, turns out angular didn’t like the way I was calling my widget generator. All is good now.

1 Like