Angularjs render html in special characters

Question

I was not very clear in my last question. However after seeing the response from the server asking the same again. The html is not getting rendered here how to fix this

AppControllers.controller('create', ['$scope','$sce', function ($scope,$sce){
    var myhtml  = "&lt;div class=&quot;modal-body &quot; id=&quot;mymodal&quot;&gt;
&lt;form name=&quot;form&quot; novalidate=&quot;&quot; class=&quot;add-user&quot;&gt;
&lt;fieldset&gt;";
    $scope.myhtml= $sce.trustAsHtml(myhtml)
    console.log($scope.myhtml)  
    /* Output of console.log
 &lt;div class=&quot;modal-body &quot; id=&quot;mymodal&quot;&gt;
   &lt;form name=&quot;ticketform&quot; novalidate=&quot;&quot;    class=&quot;add-user-from &quot;&gt
    */ 
}

<div ng-bind-html="myhtml"></div>

You can [decode the html entities](http://stackoverflow.com/questions/7394748/whats-the-right-way-to-decode-a-string-that-has-special-html-entities-in-it) before you pass it to Angular. Angular can only display html that isn't encoded like that. — Matthew King, Jul 06 '15 at 08:55

score 4 · Accepted Answer · edited Oct 02 '19 at 17:37

try something like this,

Decode the html string and pass it to ng-bind-html.

add jquery also.

var myhtml  = "&lt;div class=&quot;modal-body &quot; id=&quot;mymodal&quot;&gt;
&lt;form name=&quot;&quot; novalidate=&quot;&quot; class=&quot;add-user &quot;&gt;
&lt;fieldset&gt;";

$scope.decodedText = $('<textarea />').html(myhtml).text();


<div ng-bind-html="decodedText"></div>

DEMO

OR IF you prefer No Jquery use this,

var myhtml = "&lt;div class=&quot;modal-body &quot; id=&quot;mymodal&quot;&gt;&lt;form name=&quot;ticketform&quot; novalidate=&quot;&quot; class=&quot;add-user-from add_ticket&quot;&gt;&lt;fieldset&gt;";

var txt = document.createElement("textarea");
txt.innerHTML = myhtml;

$scope.decodedText = txt.value;

<div ng-bind-html="decodedText"></div>

DEMO

Angularjs render html in special characters

1 Answers1