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

Question

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

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

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

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

Спасибо, Matt

Answer 1

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

window.instgrm.Embeds.process() 

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

Answer 2

В ваших app.js создать директиву для добавления элемента сценария:

.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>