Сетка Твиттера Коллекции не работает AngularJS

Я пытаюсь использовать сетку сбора Twitter (например, https://dev.twitter.com/web/embedded-timelines/collection) на сайте, который я создаю, используя директиву angularJS. Виджет отображается на сайте, но сетка не работает. Вместо того, чтобы показывать в виде сетки, картинки накладываются друг на друга, все с шириной виджета. Изменение размера виджета не работает, чтобы они отображались в виде сетки. Странно то, что иногда, когда я перезагружаю страницу, она работает, но я не могу заставить ее работать последовательно. Изменить: он загружает правильный путь, как 25% случаев... я посчитал...

Это HTML, который я использую:

<div id="twitter-collection">
  <twitter-collection></twitter-collection>
</div>

И это директива:

.directive("twitterCollection", [ function() {
  return {
  restrict: 'E',
  template: '<a class="twitter-grid" href="https://twitter.com/_/timelines/539487832448843776">Tweets with pictures</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 TwitterCollection script');
    }
    run();
   }
  };
}])

Кто-нибудь испытывал эту проблему? Или только что сработала сетка сбора Twitter и как ты это сделал? Или кто-то может помочь мне выяснить, почему это не работает? Спасибо!

Источник

2 ответа

Получил это, отказавшись от директивы и просто применив html, как показано в коде ниже. Теперь он отображается в сетке каждый раз, когда я перезагружаюсь.

<div id="twitter-collection" style="width: 80%;">
  <a class="twitter-grid" href="https://twitter.com/_/timelines/666933617080299521">A Collection on Twitter</a>
</div>
<script async defer src="https://platform.twitter.com/widgets.js"></script>

Причина, по которой я попытался использовать директиву для отображения коллекции, заключается в том, что чистый HTML-код (который вы получаете из твиттера) для "обычного" виджета временной шкалы не работал должным образом. Когда вы перешли на другую страницу сайта и затем снова вернулись, виджет не перезагрузился. Поэтому я использую директиву для временной шкалы, и это работает.

Источник

Вы можете использовать это:

customized twitter feed script - `https://jsfiddle.net/reimeister/9x9fc/`

https://github.com/StanScates/Tweet.js-Mod

надежда помогает тебе

Источник
Другие вопросы по тегам