Not able to render the html code in browser using Angular JS

Question

When I try to add the tag in angular JS and render, it doesn't display the image, but rather it displays the img code as it is. Here is my Angular JS code

$scope.option = '<img src="smiley.gif" alt="Smiley face" height="42" width="42">';
    responsePromise.success(function(data, status, headers, config) {
        for(index in data) {
            $scope.usersArray.push({
                name:data[index].name,
                password:data[index].password,
                option:$scope.option
            });
        }           
    });

My html code

<tr ng-repeat="user in usersArray">
   <td><span ng-model="user.name">{{user.name}}</span></td>
   <td><span ng-model="user.password">{{user.password}}</span></td>
   <td><span ng-model="user.option">{{user.option}}</td>
</tr>

Other details are coming fine, except the tag. Do I need to add anything extra here?

ngBindHtml

Florian F.
– Florian F.

2014-04-03 11:37:27 +00:00
Commented Apr 3, 2014 at 11:37 — Florian F.
– Florian F., Commented Apr 3, 2014 at 11:37

Leonardo Delfino · Accepted Answer · 2014-04-03 11:41:40Z

1

You can try the directive bindHTML.

Html:

<div ng-controller="ngBindHtmlCtrl">
 <p ng-bind-html="myHTML"></p>
</div>

Controller:

angular.module('ngBindHtmlExample', ['ngSanitize']).controller('ngBindHtmlCtrl', ['$scope', function ngBindHtmlCtrl($scope) {
  $scope.myHTML =
     'I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>';
}]);

Doc: http://docs.angularjs.org/api/ng/directive/ngBindHtml

answered Apr 3, 2014 at 11:41

Leonardo Delfino

1,49810 silver badges20 bronze badges

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

Comments

JB Nizet · Accepted Answer · 2014-04-03 11:41:04Z

You shouldn't deal withn HTML in the controller, but with structured data. You should generate the HTML in the view:

controller:

$scope.option = {
    src: 'smiley.png',
    alt: 'Smiley face',
    width: 42,
    height: 42
};
responsePromise.success(function(data, status, headers, config) {
    for(index in data) {
        $scope.usersArray.push({
            name:data[index].name,
            password:data[index].password,
            option: $scope.option
        });
    }           
});

view:

<tr ng-repeat="user in usersArray">
   <td><span ng-model="user.name">{{user.name}}</span></td>
   <td><span ng-model="user.password">{{user.password}}</span></td>
   <td><span ng-model="user.option">
       <img ng-src="{{ user.option.src }}" alt="{{ user.option.alt }} width="{{user.option.width}}" height="{{user.option.height }}" />
   </td>
</tr>

Roy M J · Accepted Answer · 2014-04-03 11:39:13Z

0

Try:

$scope.option =  $sce.trustAsHtml('<img src="smiley.gif" alt="Smiley face" height="42" width="42">');

You need to inject $sce.

What is $sce?

$sce is a service that provides Strict Contextual Escaping services to AngularJS. Strict Contextual Escaping (SCE) is a mode in which AngularJS requires bindings in certain contexts to result in a value that is marked as safe to use for that context.

Refer : http://docs.angularjs.org/api/ng/service/$sce

answered Apr 3, 2014 at 11:39

Roy M J

6,9367 gold badges53 silver badges79 bronze badges

2 Comments

Syed Over a year ago

What is $sce? I didn't use it anywhere else?

Roy M J Over a year ago

Just to tell Angular that it is safe to use the html content that you are trying to include.

Collectives™ on Stack Overflow

Not able to render the html code in browser using Angular JS

My html code

3 Answers 3

Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

My html code

3 Answers 3

Comments

1 Comment

2 Comments

Related