ng-bind-html doesn't work properly

Question

I want to show my data as html in angularjs. Here is apart of my codes :

<div class="panel-body" ng-controller="hosgeldinizController"> <div id="divHosgeldiniz" name="hosgeldinizMessages" ng-repeat="hosgeldinizMessage in hosgeldinizMessages"> <div> <span ng-class-odd="'degisimIcerik'" ng-class-even="'degisimIcerik alternate'" ng-bind-html="hosgeldinizMessage.M_Icerik">{{hosgeldinizMessage.M_Icerik}} </span> </div> </div> </div>

But it doesnt show as html it shows just like normal text however hosgeldinizMessage.M_Icerik contains html elements. What should I do to show as html?

stackoverflow.com/questions/19415394/…

paul
– paul

2014-07-08 09:22:56 +00:00
Commented Jul 8, 2014 at 9:22 — paul
– paul, Commented Jul 8, 2014 at 9:22
Also one of the div's is not closed properly

edi9999
– edi9999

2014-07-08 10:44:26 +00:00
Commented Jul 8, 2014 at 10:44 — edi9999
– edi9999, Commented Jul 8, 2014 at 10:44

Fahad · Accepted Answer · 2015-06-10 08:42:13Z

Get ngSanitize as a dependancy in your module

 var app = angular.module("dene",['ngSanitize']); app.controller("deneCtrl",function(){ this.selam = "<p>Merhaba <strong>Angular</strong></p>"; });

and use ng-bind-html in your view

<div ng-controller="deneCtrl as dene"> <span ng-bind-html = " dene.selam "> </span> </div>

but be sure to include the related versions

as in

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>

or if you prefer it locally you download a copy https://code.angularjs.org/

point to note

Make sure that you have the same version of ngSanitize as AngularJS version you are running ,

well .... for some reason if you mixed them up (e.g angular 1.2.23 and angular-sanitize 1.0.0) you will end up with either a sanitized version in your view (it will work) but ALOT of ERRORS in your console or sometimes it wont render on screen at ALL :) - I believe that's what you are facing

Trust me , I 've been there :D

cagin · Accepted Answer · 2014-07-08 12:19:33Z

It worked for me

In controller...

 $scope.trustedHtml = function (plainText) { return $sce.trustAsHtml(plainText); }

In the html

 <span ng-class-odd="'degisimIcerik'" ng-class-even="'degisimIcerik alternate'" ng-bind-html="trustedHtml(hosgeldinizMessage.M_Icerik)"></span>

Community · Accepted Answer · 2017-05-23 12:24:41Z

<div class="panel-body" ng-controller="hosgeldinizController"> <div id="divHosgeldiniz" name="hosgeldinizMessages" ng-repeat="hosgeldinizMessage in hosgeldinizMessages"> <div><span ng-class-odd="'degisimIcerik'" ng-class-even="'degisimIcerik alternate'" ng-bind-html="hosgeldinizMessage.M_Icerik"></span></div> </div>

If you bind to a value with HTML in it, you should use ngBindHtml.These bindings {{ foo }} prevent injecting actual HTML for security reasons.

Also check this $sce

EDIT

Install angular-sanitize and include it in your dependencies...

Angular sanitize / ng-bind-html not working?

Sang Suantak · Accepted Answer · 2014-07-08 09:24:16Z

This line:

<div><span ng-class-odd="'degisimIcerik'" ng-class-even="'degisimIcerik alternate'" ng-bind-html="hosgeldinizMessage.M_Icerik">{{hosgeldinizMessage.M_Icerik}} </span></div>

should be

<div><span ng-class-odd="'degisimIcerik'" ng-class-even="'degisimIcerik alternate'" ng-bind-html="hosgeldinizMessage.M_Icerik"></span></div>

without the {{}} expression.

Display of the content is already taken care by the ng-bind-html directive.

parthicool05 · Accepted Answer · 2014-07-08 09:25:13Z

I think using ng-bind-html-unsafe will get you what you need.

<div ng-repeat="hosgeldinizMessage in hosgeldinizMessages" ng-bind-html-unsafe="hosgeldinizMessage.M_Icerik"></div>

Here's a working fiddle: http://jsfiddle.net/nfreitas/aHfAp/

Documentation for the directive can be found here: http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe

Collectives™ on Stack Overflow

ng-bind-html doesn't work properly

5 Answers 5

Comments

Comments

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

1 Comment

Linked

Related