无法在 AngularJS ng-views 中加载 Instagram 个人资料答案

【问题标题】：Cannot load Instagram profiles in AngularJS ng-views无法在 AngularJS ng-views 中加载 Instagram 个人资料
【发布时间】：2015-05-31 20:11:44
【问题描述】：

我正在尝试嵌入 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嵌入HTML末尾的script标签有关，但我还没有找到解决方案：

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

这是您可以玩的plunker，看看它在fiddle 上应该是什么样子。

【问题讨论】：

嗯，Angular 是否有可能在 instagram 脚本完全加载之前启动？ Instagram 脚本准备好后是否有回调？如果有的话，也许里面有手动引导 Angular？或者尝试从 Instagram 的 script 标签中删除 async 和 defer...
@MKSafi 我已经尝试删除 async 和 defer 属性，但没有成功。我真的不知道包含的脚本是做什么的，有点难以阅读：platform.instagram.com/en_US/embeds.js。你有什么收获吗？
stackoverflow.com/a/40855386/5537365 这就是您需要的一切。这对我来说很完美！

标签： javascript angularjs instagram ng-bind-html

【解决方案1】：

它与 Instagram 嵌入 HTML 末尾的脚本标签有关

是的，确实如此；似乎使用 ng-bind 插入 HTML 的方式阻止了它的工作。

您可以将脚本复制/粘贴到索引页面：

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

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

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

见working plnkr

【讨论】：

【解决方案2】：

我只用过

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

没有

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

并且有效！

【讨论】：

【解决方案3】：

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

【讨论】：