无法在 AngularJS ng-views 中加载 Instagram 配置文件

Cannot load Instagram profiles in AngularJS ng-views

我正在尝试嵌入 Instagram 个人资料:

$scope.instagram = "<blockquote class=\"instagram-media\" data-instgrm-version=\"4\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:8px;\"> <div style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;\"> <div style=\" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\"></div></div><p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\"><a href=\"https://instagram.com/p/1yaMWyoVZM/\" style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;\" target=\"_top\">Une photo publiée par National Geographic (@natgeo)</a> le <time style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\" datetime=\"2015-04-22T18:41:49+00:00\">22 Avril 2015 à 11h41 PDT</time></p></div></blockquote>\n<script async defer src=\"//platform.instagram.com/en_US/embeds.js\"></script>";

但是在 ng-view 中显示它时(其中 trust 只是调用 $sce.trustAsHtml):

<div ng-bind-html="instagram | trust"></div>

配置文件未加载。知道为什么吗?我认为这与Instagram嵌入末尾的script标签有关HTML,但我还没有找到解决方案:

<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

这里是plunker you can play with, see how it should look like on this fiddle.

it has something to do with the script tag at the end of the Instagram embed HTML

是的,确实如此;并且 HTML 插入 ng-bind 的方式似乎阻止了它的工作。


您可以copy/paste索引页面的脚本:

 <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

并通过在控制器中添加 $timeout 来显示图像:

$timeout(function(){
  $window.instgrm.Embeds.process();
});

working plnkr

我只用过

$timeout(function(){
  $window.instgrm.Embeds.process();
});

没有

<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

并且有效!

在您的 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>