Tính năng nhúng Instagram không hoạt động khi thêm nhúng động

Question

Làm việc trên blog tải các bài đăng trên cuộn giấy vô hạn. Mỗi bài đăng trên blog có thể hoặc không được nhúng Instagram. Tôi thấy rằng trang đầu tiên hiển thị trên trang sẽ được xử lý (bất kể nó nằm trong đánh dấu trang ban đầu hay được thêm tự động), những trang sau sẽ không được hiển thị. Đây là một JS Bin đơn giản để minh họa các vấn đề:

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

Các nhúng Instagram đầu tiên là trong đánh dấu trang ban đầu. Một nhúng Instagram khác được thêm sau khi tải trang, sau 4 giây. Bổ sung nhúng thứ hai không được xử lý.

Mọi ý tưởng tại sao? Có vẻ như tập lệnh nhúng Instagram sẽ chỉ chạy một lần. Bất kỳ cách nào tôi có thể buộc nó để làm mới?

Cảm ơn, Matt

Answer 1

Kịch bản embed.js mà đi kèm với mã nhúng Instagram của có một chức năng quá trình bạn có thể gọi.

window.instgrm.Embeds.process() 

Chỉ cần sử dụng bất cứ khi nào nội dung động của bạn tải.

Answer 2

Trong app.js bạn tạo ra một chỉ thị cho thêm yếu tố kịch bản:

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

và sau đó trong cuộc gọi view html của bạn:

<div externalscript></div>