Instagram не работает при добавлении динамиков

Работа в блоге, который загружает сообщения на бесконечном скроллере. Каждое сообщение в блоге может содержать или не включать Instagram. Я обнаружил, что первая, которая отображается на странице, будет обработана (независимо от того, будет ли она в начальной разметке страницы или динамически добавлена), следующие из них не будут. Вот простой JS Bin, который иллюстрирует проблему:

http://jsbin.com/hilixi/1/edit?html,js,output

Первая вставка Instagram находится в начальной разметке страницы. Еще одна вставка Instagram добавляется после загрузки страницы через 4 секунды. Второй встроенный add не обрабатывается.

Любые идеи, почему? Похоже, что вставка Instagram script будет запускаться только один раз. В любом случае я могу заставить его обновить?

Спасибо, Matt

Ответ 1

В embed.js script, который поставляется с кодом внедрения Instagram, есть функция процесса, которую вы можете вызвать.

window.instgrm.Embeds.process()

Просто используйте это при загрузке динамического содержимого.

Ответ 2

В приложении app.js создайте директиву для добавления элемента script:

.directive('externalscript', function() {
   var injectScript = function(element) {
    var instagramScript = angular.element(document.createElement('script'));
    instagramScript.attr('async defer');
    instagramScript.attr('charset', 'utf-8');
    instagramScript.attr('src', 'http://platform.instagram.com/en_US/embeds.js');
    instagramScript.attr('onload', 'window.instgrm.Embeds.process()');
    element.append(instagramScript);
    var twitterScript = angular.element(document.createElement('script'));
    twitterScript.attr('async defer');
    twitterScript.attr('charset', 'utf-8');
    twitterScript.attr('src', 'http://platform.twitter.com/widgets.js');
    element.append(twitterScript);
};

  return {
      link: function(scope, element) {
          injectScript(element);
      }
  };
})

а затем в вашем вызове просмотра html:

<div externalscript></div>