3

I'm trying to display the html content which I receive in my div.testData by using ng-bind-html together with filter. I've already included 'ngSanitize' in my app. But somehow, it works only partially. Seem like, filter is not getting applied. It works fine when I create a local file and check, but doesn't work when I use the same code in my project environment.

Sample data:

$scope.userProfile.Information = '<p>Hello, this is sample data to test html.</p>';

The output displayed is:

'<p>Hello, this is sample data to test html.</p>'

Desired output is :

'Hello, this is sample data to test html.'

Please help me fix this.

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="testData" ng-bind-html= "userProfile.Information | to_trusted"></div>

Filter: 

app.filter('to_trusted', ['$sce', function($sce){
 return function(text) {
    var doc = new DOMParser().parseFromString(text, "text/html");
    var rval= doc.documentElement.textContent;
    //console.log(rval);
    return $sce.trustAsHtml(rval);
  };
}]);
Sunny
  • 902
  • 3
  • 18
  • 41

3 Answers3

1

You can try like the below code as you have your given working example with this plunker. Please check that too..

Controller:

app.filter('to_trusted', ['$sce', function($sce){
 return function(text) {
    var txt = document.createElement("textarea");
    txt.innerHTML = text;
    return $sce.trustAsHtml(txt.value);
  };
}]);
Immanuel Kirubaharan
  • 1,094
  • 1
  • 11
  • 17
  • It is the same. It doesn't render as expected in my project environment! – Sunny Dec 18 '17 at 08:26
  • I passed an alert inside my filter. But I get the alert in my local environment but not in project environment. Seems like the filter itself is not invoked! – Sunny Dec 18 '17 at 08:44
  • This is happening because in my project environment I'm getting "$scope.userProfile.Information" through an AJAX call. How do I make it to work? – Sunny Dec 18 '17 at 08:58
  • Can you create a sample error scenario with plunker, so that we can help you better. – Immanuel Kirubaharan Dec 18 '17 at 10:08
  • I'd created a fiddle here. https://jsfiddle.net/15o8d40h/ Basically, if I get the ajax response which I try to render, the filter doesn't work. On static data, it works fine. – Sunny Dec 18 '17 at 10:25
  • Your fiddler is not working! :( Did you get any error in your browser console window along with log info.? – Immanuel Kirubaharan Dec 18 '17 at 11:05
  • no, nothing at all! Just that the output is as mentioned in my question above. – Sunny Dec 18 '17 at 11:06
  • Can you make sure you have injected **ngSanitize** app to your application.? – Immanuel Kirubaharan Dec 18 '17 at 11:09
  • It is injected for sure! – Sunny Dec 18 '17 at 11:10
  • I couldn't get what's wrong with your code. Since it is working with my [plunker](http://plnkr.co/edit/FuWBEZQI9xcE68Mz6kDN?p=preview) which I've updated now please check. Also added **ng-if** to the template tag to render it after it gets the data. Please try the same. – Immanuel Kirubaharan Dec 18 '17 at 12:08
  • @ImmanuelKirubaharan:i checked ur code but in my case filter function is fire can you tell me why? – Kapil Soni Jun 26 '20 at 12:46
0

Answer is here already.

app.filter('to_trusted', ['$sce', function($sce){     
    return $sce.trustAsHtml;
}]);
Praveen Prasannan
  • 7,093
  • 10
  • 50
  • 70
0

var app = angular.module("Profile",[])
app.directive('toTrusted',function(){
       return function(scope,element,attr){
            var result      = attr.data
            var input_val   = result.replace(/&lt;/g,  "<").replace(/&gt;/g,  ">").replace(/&#10;/g, "\n");
            element[0].innerHTML    = input_val;
            scope.use_recusrive(element[0].firstElementChild,element[0])
    }
 
               
                        
                       
       
})
app.controller("ProfileCtrl", function($scope, $rootScope,$sce){
             $scope.valid_input      = '&lt;div&gt; div 1 sample  &lt;p&gt; div1 indide p tag .&lt;/p&gt;&lt;/div&gt;&lt;p&gt; p tag 2.&lt;/p&gt; &lt;div&gt;DIV 2 Sample &lt;/div&gt;';
             $scope.use_recusrive    = function(dom,p_node){
            if(!dom)
                    return;
            var s_dom        = dom.firstElementChild
            if(!s_dom){
                    var text_content        = dom.textContent||'';
                    var tag_name            = dom.tagName
                    var new_text_content    = text_content+' to be renedered as '+"'"+tag_name+"'"+' tag.';
                    dom.textContent = new_text_content;
                    /*if(s_dom.nextElementSibling)
                            $scope.use_recusrive(s_dom.nextElementSibling,dom)*/
            }else{
                     $scope.use_recusrive(dom.firstElementChild,dom)
            }
            var nex_sibling  = dom.nextElementSibling
            if(nex_sibling){
                    $scope.use_recusrive(nex_sibling,dom)
            }
    }
  
})
div{
  color:black;
 font-weight:700;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
     <div to-trusted data={{valid_input}} ></div>
</body>
  • My question is more on ajax response. How to sanitize the input and display the html content? – Sunny Dec 18 '17 at 11:08
  • you can use this kind of code also.after rendering take each and every element inside the dom and update element textContent.no need to use sanitize.see that $scope.valid_input structure. –  Dec 19 '17 at 03:36