1

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 <b>hello</b><i>something</i> etc

The problem is its displaying the content as <b>hello</b><i>something</i> 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?

Improve this question

4 Answers 4

Reset to default
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) {...
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

thanks for the extra tip any idea why i am getting "$sce is not defined"
@vignesh It's a service, you have to inject it. Something like this ['$scope', '$sce', function($scope, $sce)... in your controller
[$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 <b>bold</b> in the result
@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.
yeah i have accepted the answer checking for existing question on the same line
|
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

Improve this answer

Comments

1

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

Improve this answer

Comments

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.