Instagram non funziona quando si aggiungono dinamicamente gli incorporamenti

Question

Lavorando su un blog che carica post su uno scroller infinito. Ogni post del blog può includere o non avere incorporamenti di Instagram. Sto scoprendo che il primo che viene mostrato nella pagina verrà elaborato (indipendentemente dal fatto che sia nel markup iniziale della pagina, o aggiunto dinamicamente), i seguenti non lo saranno. Ecco un semplice JS Bin che illustra il problema:

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

La prima embed Instagram è nella pagina di markup iniziale. Un altro Instagram incorporato viene aggiunto dopo il caricamento della pagina, dopo 4 secondi. Il secondo embed add non viene elaborato.

Qualche idea, perché? Sembra che lo script di incorporamento di Instagram venga eseguito una sola volta. In qualsiasi modo posso forzarlo per aggiornare?

Grazie, Matt

Answer 1

Lo script embed.js che viene fornito con il codice embed di Instagram ha una funzione di processo si può chiamare.

window.instgrm.Embeds.process() 

Basta usare che ogni volta che i carichi di contenuti dinamici.

Answer 2

Nelle tue app.js creare una direttiva per l'aggiunta di elemento di 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); 
     } 
    }; 
}) 

e quindi nella vista chiamata html:

<div externalscript></div>