Osadzenia Instagrama nie działają podczas dynamicznego dodawania osadzeń.

Question

Praca nad blogiem, który ładuje posty na nieskończonej scroller. Każdy post na blogu może mieć lub nie mieć osadzonych Instagramów. Zauważyłem, że pierwsza strona wyświetlana na stronie zostanie przetworzona (niezależnie od tego, czy jest w początkowej stronie znaczników, czy dynamicznie dodawana), kolejne nie będą. Oto prosty JS Bin, który ilustruje problem:

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

Pierwszy Instagram embed jest w początkowym widoku znaczników. Kolejne osadzenie na Instagramie dodaje się po wczytaniu strony, po 4 sekundach. Drugie dodanie do embed nie zostanie przetworzone.

Jakieś pomysły, dlaczego? Wygląda na to, że skrypt do umieszczania na Instagramie uruchomi się tylko raz. W jaki sposób mogę go zmusić do odświeżenia?

Dzięki Matt

Answer 1

embed.js skrypt, który pochodzi z Instagram za kod embed posiada funkcję procesową można zadzwonić.

window.instgrm.Embeds.process() 

Po prostu użyj tego, gdy ładuje się zawartość dynamiczna.

Answer 2

W swoim app.js stworzyć dyrektywę dodawania elementu skryptu:

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

a następnie w widoku html rozmowy:

<div externalscript></div>