current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite

This question already has an answer here:

Actually im searching about how i can transform my variable into Html, this variable contain a embed code from instagram.

in my controller

instaembed.controler "instaCtrl", ($scope, $http) ->
#instagram embed get example from insta
    $http.get ("http://api.instagram.com/oembed?url=http://instagr.am/p/fA9uwTtkSN/")
        .success(data) ->
           $scope.html = data.html
...

the result in $scope.html contain a blockquote with many div and image

i've tested it in the view (with ngsanitize), but it show only the text and not the image.

Anyone have an idea about how to get it ? :D

thank you (sorry for my english).

share|improve this question

marked as duplicate by Davin Tryon Jun 24 at 10:44

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
    
stackoverflow.com/questions/9381926/… –  astroanu Jun 24 at 10:42

3 Answers 3

up vote 1 down vote accepted

You will have to use Angular's built in Strict Contextual Escaping $sce

$sce Documentation

Then, in your controller:

instaembed.controler "instaCtrl", ($scope, $http, $sce) ->
#instagram embed get example from insta
    $http.get ("http://api.instagram.com/oembed?url=http://instagr.am/p/fA9uwTtkSN/")
        .success(data) ->
           $scope.html = $sce.trustAsHtml(data.html);
...
share|improve this answer
    
Hello, it's working a little (but better than my old test xD), now i get the the text, but i still can't get the image/video of the the embed, i don't know if Sce is still blocking the image/video and the script inside the <blockquote> ? –  Vance Jun 24 at 11:19
    
I don't know exactly what might cause that issue... can you create a fiddle or plunker with the data from the response as dummy data? –  Razvan Balosin Jun 24 at 11:21
    
Hello, plnkr.co/edit/ePWwS4NHwTfRcxprlAtJ?p=preview As you can see, the image/video don't appear T-T. –  Vance Jun 24 at 12:18
    
I've just checked the Instagram api and it seems that your $http.get link is the issue as that doesn't seem to be the way you get a media element from their API, so everything is fine in your code now, just look over their API again :) –  Razvan Balosin Jun 24 at 12:25
1  
Hello, it's working now :), thank you :D –  Vance Jun 24 at 13:09
up vote 0 down vote

You need to use ngBindHtml directive. https://docs.angularjs.org/api/ng/directive/ngBindHtml

<div ng-bind-html-unsafe="html"></div>

Where html is your $scope.html variable. This will render inside div what your variable contains.

function testCtrl($scope) {
    $scope.html = "<strong>Hello world!</strong>"
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-controller="testCtrl" ng-app>
    <div ng-bind-html-unsafe="html"></div>
</div>

share|improve this answer
up vote 0 down vote

You should use ng-bind-html

<span ng-bind-html="your scope variable"></span>
share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.