0

我正在尝试使用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 工作，你是怎么做到的？或者有人可以帮我找出为什么这不起作用？谢谢！

4

2 回答 2

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 获得）无法正常工作。当您导航到站点的另一个页面然后再次返回时，小部件没有重新加载。因此，我为时间线使用了一个指令，这很有效。

于 2015-11-19T12:41:46.313 回答
0

你可以使用它：

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

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

希望对你有帮助

于 2015-11-18T15:56:30.143 回答