0

I have a simple template in angular js:

<div>{{post}}</div>

where post is an embedded code of one of my posts which I pulled of my facebook profile. the "post" property is set in the scope of the controller related to the div. When I load the page I get the embedded code as text.

Then after doing some reading I tried doing it like so:

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

and

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

now the embedded html code is set into the page's html code but the post is not shown. it is as if it is set there but not loaded or something.

by the way if I set the code itself in the template the post is loaded and shown as needed, it just that from time to time I would like to change the post and What am I missing here? thanks

Queequeg
  • 947
  • 7
  • 11

1 Answers1

1

I guess that it doesn't work because the post scope property is sanitized.

Try to inject $sce service into your controller and add this line:

$scope.post = $sce.trustAsHtml($scope.post);

$sce.trustAsHtml returns an object that is trusted by angular for use in specified strict contextual escaping contexts such as ng-bind-html, ng-include...

PrimosK
  • 13,848
  • 10
  • 60
  • 78
  • thanks for your answer @PrimosK. I think that this is the right direction. I've found here: [link](http://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu) that from angular 1.2+ "ng-bind-html-unsafe" is not supported any more which would explain why it is not shown. I have already included sanitize.js in my app but for some reason the $sce is not created. Once I'll have it sort out I'll select your answer. – Queequeg Mar 03 '14 at 09:23
  • Hi @PrimosK, yes, thanks for checking. Your first solution worked perfectly, I confused it with the angular-sanitize package and that's why it didn't work for me on the first place. Selecting your answer. – Queequeg Mar 04 '14 at 14:45