Ng-bind-html is not working properly

Question

I want to show my data as html in angularjs. Here, apart from 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 does not appear as html, it shows like plain text, however hosgeldinizMessage.M_Icerik contains html elements. What to do to show how html?

Answer 1

Get ngSanitize as a dependency 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 related versions

how 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 of https://code.angularjs.org/

Mark

, ngSanitize, AngularJS. ,

... - , (, angular 1.2.23 angular -sanitize 1.0.0), ( ), ALOT OF ERRORS at ALL:) - ,

, : D

Answer 2

...

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

html

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

Answer 3

<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>

HTML , ngBindHtml. {{foo}} HTML .

$sce

angular-sanitize ...

Angular sanitize/ng-bind-html ?

Answer 4

:

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

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

{{}}.

ng-bind-html.

Answer 5

, ng-bind-html-unsafe , .

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

: http://jsfiddle.net/nfreitas/aHfAp/

: http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe