Parse HTML in AngularJS ng-repeat?

Question

How do I parse HTML coming from the server via a string? I have this from the server:

<img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class=" user-1-avatar avatar- photo" width="" height="" alt="Avatar Image" />

which comes in via a object property like:

{admin: {avatar "<img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class=" user-1-avatar avatar- photo" width="" height="" alt="Avatar Image" />"}}

I've tried using ng-bind-html but no luck... What can I use?

use $compile service of angularjs.

micronyks
– micronyks

2014-09-20 13:28:44 +00:00
Commented Sep 20, 2014 at 13:28 — micronyks
– micronyks, Commented Sep 20, 2014 at 13:28
do you have an example?

vimes1984
– vimes1984

2014-09-20 13:30:16 +00:00
Commented Sep 20, 2014 at 13:30 — vimes1984
– vimes1984, Commented Sep 20, 2014 at 13:30

mohamedrias · Accepted Answer · 2014-09-20 14:00:39Z

1

later versions of AngularJS:

function HomeCtrl($scope, $sce) {
  $scope.object = {
  admin: {
    avatar : '<img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class=" user-1-avatar avatar- photo" width="" height="" alt="Avatar Image" />'
},
fred: {
    avatar : '<img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class=" user-1-avatar avatar- photo" width="" height="" alt="Avatar Image" />'
}};
  $scope.avatar = $sce.trustAsHtml($scope.object.admin.avatar);
}

HTML:

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

Working Demo : http://jsbin.com/butuwu/1/edit

Older version :

HTML:

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

JS:

function HomeCtrl($scope) {
  var object = {
  admin: {
    avatar : '<img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class=" user-1-avatar avatar- photo" width="" height="" alt="Avatar Image" />'
}};
  $scope.avatar = object.admin.avatar;
}

edited Sep 20, 2014 at 14:00

answered Sep 20, 2014 at 13:33

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

vimes1984 Over a year ago

the problem with this is that it doesn't work when using a modern version of angularJS jsbin.com/rikiyukaloza/1/edit

mohamedrias Over a year ago

Updated your jsbin.. check the answer above :)

vimes1984 Over a year ago

yeah my problem with that is that it comes in via the server and the value of "admin" is not always the same

mohamedrias Over a year ago

In that case, you will be fetching object inside the service.. Then inject it inside the controller.. Just for demo purpose i have stubbed the object inside controller itself.

vimes1984 Over a year ago

ended up using: app.filter('unsafe', function($sce) { return function(val) { return $sce.trustAsHtml(val); }; });

Collectives™ on Stack Overflow

Parse HTML in AngularJS ng-repeat?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related