angularJs variable to Html

Question

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).

http://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs — astroanu, Jun 24 '15 at 10:42

score 1 · Accepted Answer · answered Jun 24 '15 at 10:43

1

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);
...

answered Jun 24 '15 at 10:43

Razvan B.

6,721
2
19
32

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
?
– Vance Jun 24 '15 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 B. Jun 24 '15 at 11:21
Hello, http://plnkr.co/edit/ePWwS4NHwTfRcxprlAtJ?p=preview As you can see, the image/video don't appear T-T. – Vance Jun 24 '15 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 B. Jun 24 '15 at 12:25
Hello, thanks for your comment I'm a bit confused about their Api : https://instagram.com/developer/embedding/#media_redirect they give us an example to how to get the embed version of the post. the link of the example : http://api.instagram.com/oembed?url=http://instagr.am/p/fA9uwTtkSN/ This link redirect to : http://api.instagram.com/publicapi/oembed/?url=http://instagr.am/p/fA9uwTtkSN/ with the good json, but i don't know why they don't show the image T-T but thanks for your help, maybe i can find why i can't load image/video :) thank you – Vance Jun 24 '15 at 12:35
use media embeding - According to [Instagram's API site](http://instagram.com/developer/endpoints/media/) a **GET /media/media-id** request for a video object returns a JSON object with the information you need in "data.videos". – Razvan B. Jun 24 '15 at 12:48
1

Hello, it's working now :), thank you :D – Vance Jun 24 '15 at 13:09

score 0 · Answer 2 · answered Jun 24 '15 at 10:42

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>

score 0 · Answer 3 · answered Jun 24 '15 at 10:43

0

You should use ng-bind-html

<span ng-bind-html="your scope variable"></span>

answered Jun 24 '15 at 10:43

Abdul23

5,265
2
16
23

angularJs variable to Html

3 Answers3