javascript - Cannot load Instagram profiles in AngularJS ng-views -


i'm trying embed 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 within ng-view (where trust calls $sce.trustashtml):

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

the profile not load. idea why? think has script tag @ end of instagram embed html, haven't found solution yet:

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

here plunker can play with, see how should on fiddle.

it has script tag @ end of instagram embed html

yes, does; , seems way html inserted ng-bind prevents working.


you copy/paste script index page:

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

and display image adding $timeout in controller:

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

see working plnkr


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -