Instagram bettet nicht beim dynamischen Hinzufügen von Einbettungen

Question

Arbeiten an einem Blog, das Beiträge auf einem infinite Scroller lädt. Jeder Blogeintrag kann Instagram-Einbettungen enthalten oder nicht. Ich stelle fest, dass die erste Seite, die auf der Seite angezeigt wird, verarbeitet wird (unabhängig davon, ob es sich um die erste Seitenmarkierung handelt oder dynamisch hinzugefügt wurde), die folgenden nicht. Hier ist eine einfache JS Bin, die das Problem veranschaulicht:

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

Die erste Instagram einbetten in der Anfangs Seite Markup ist. Eine weitere Instagram-Einbettung wird nach dem Laden der Seite nach 4 Sekunden hinzugefügt. Die zweite Einbettung wird nicht verarbeitet.

Irgendwelche Ideen warum? Es scheint, dass das eingebettete Instagram-Skript nur einmal ausgeführt wird. Irgendwie kann ich es zwingen, mich zu erfrischen?

Danke, Matt

Answer 1

Das embed.js Skript, das mit Einbettungscode Instagram ist kommt, hat einen Prozess Funktion, die Sie aufrufen können.

window.instgrm.Embeds.process() 

Verwenden Sie das einfach, wenn Ihr dynamischer Inhalt geladen wird.

Answer 2

In Ihrem app.js eine Richtlinie für das Hinzufügen von Skriptelement erstellen:

.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); 
     } 
    }; 
}) 

und dann in der HTML-Ansicht Aufruf:

<div externalscript></div>