Question

我正在尝试使用angularJS指令在我正在构建的网站上使用Twitter收集网格（例如：https://dev.twitter.com/web/embedded-timelines/collection）。小部件显示在网站上，但网格不起作用。不是以网格形式显示图片堆叠在彼此之上，而是全部具有小部件的宽度。调整窗口小部件的大小不会使它们显示为网格。奇怪的是，有些时候，当我重新加载页面时，它正在工作，但我无法让它始终如一地工作。编辑：它加载正确的方式像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 Collection Grid工作，你是怎么做到的？或者有人可以帮我找出为什么这不起作用？谢谢！

Answer 1

通过抛弃指令并使用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代码（从twitter获得）无法正常工作。当您导航到站点的另一个页面然后再次返回时，窗口小部件没有重新加载。因此，我使用时间轴的指令，这是有效的。

Answer 2

你可以使用它：

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

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

希望能帮助你

Twitter Collection Grid无法使用AngularJS

2 个答案: