javascript - Twitter 集合网格不支持 AngularJS

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