sp00m sp00m - 4 months ago 27
AngularJS Question

Cannot load Instagram profiles in AngularJS ng-views

I'm trying to embed an Instagram profile:

$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>";


But when displaying it within an
ng-view
(where
trust
simply calls
$sce.trustAsHtml
):

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


The profile does not load. Any idea why? I think it has something to do with the
script
tag at the end of the Instagram embed HTML, but I haven't found a solution yet:

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


Here is a plunker you can play with, see how it should look like on this fiddle.

Answer

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

Yes, it does; and it seems the way the HTML is inserted with ng-bind prevents it from working.


You could copy/paste the script to the index page:

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

and display your image by adding a $timeout in your controller:

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

See working plnkr