append as html in angular

Question

I want to append the value as html in angular

<div class="storycontent" ng-class="{show: show}">
       <a href="#/profile?{{review.id}}">{{review.name}}</a>: {{review.story}}
</div>

Here in the {{review.story}} I will have value like hellosomething etc

The problem is its displaying the content as hellosomething instead of hellosomething (ie the styling is not applied) I have to use jQuery to do this

$(".content").each(function () {
    $(this).html($(this).text())
});

How can i directly append as .html() instead of .text() in angular?

Pierre-Alexandre Moller · Accepted Answer · 2015-08-14 07:41:17Z

4

You don't even need Jquery for that. ng-bind-html can do the trick by himself.

<div class="storycontent" ng-class="{show: show}">
  <a href="#/profile?{{review.id}}">{{review.name}}</a>: 
    <span ng-bind-html="review.story"></span>
</div>

Moreover, it's also better to add this on your controller when you get the value. Because without this, ng-bind-hmtl isn't safe.

$scope.review.story = $sce.trustAsHtml($scope.review.story);

Note : $sce have to be injected in your controller. It's not available directly with angularJS.

.controller('ControllerName', ['$scope', '$sce', function($scope, $sce) {...

edited Aug 14, 2015 at 7:41

answered Aug 14, 2015 at 7:04

Pierre-Alexandre Moller

2,3541 gold badge22 silver badges29 bronze badges

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

8 Comments

Vignesh Subramanian Over a year ago

thanks for the extra tip any idea why i am getting "$sce is not defined"

Pierre-Alexandre Moller Over a year ago

@vignesh It's a service, you have to inject it. Something like this ['$scope', '$sce', function($scope, $sce)... in your controller

Vignesh Subramanian Over a year ago

[$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html Working on this issue now i am getting bold in the result

Pierre-Alexandre Moller Over a year ago

@vignesh Your value isn't a string ? Anyway this isn't really matching with the initial question. Add a second one will be better I think.

Vignesh Subramanian Over a year ago

yeah i have accepted the answer checking for existing question on the same line

|

lucas · Accepted Answer · 2015-08-14 07:06:43Z

2

You can use directive ngBindHtml, more info here: https://docs.angularjs.org/api/ng/directive/ngBindHtml

Also you have to remeber that before binding html you have to ensure Angular that it is safe. You can use ngSanitize for it and $sce.trustAsHtml function:

https://docs.angularjs.org/api/ng/service/$sce#trustAsHtml

answered Aug 14, 2015 at 7:06

lucas

1538 bronze badges

Comments

atinder · Accepted Answer · 2015-08-14 07:05:10Z

1

use ng-bind-html="expression" expression is your html here

answered Aug 14, 2015 at 7:05

atinder

2,09014 silver badges15 bronze badges

Comments

sahil gupta · Accepted Answer · 2015-08-14 07:05:33Z

1

You can use ng-bind-html in angular.

By Docs: ng-bind-html

Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application.

Use: ng-bind-html="review.story">

Refer docs

answered Aug 14, 2015 at 7:05

sahil gupta

2,34914 silver badges14 bronze badges

Collectives™ on Stack Overflow

append as html in angular

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related