HTML codes showing up when using ng-bind-html

Question

The Output in the inspect element:

<div ng-bind-html="job.description" class="ng-binding">
    "<p><strong>Our Responsibilities</strong></p>"
</div>

This is my HTML code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.3.20/angular-sanitize.min.js"></script>

var myApp = angular.module('rivigoApp', ['ngSanitize']);

<div ng-bind-html="job.description"></div>

How do I do to make it compile the HTML in the output? I believe the main issue is with the quotes "" but I'm unable to figure out how to proceed. I've tried using various other methods.

Please share how job.description is defined in your controller. — Daniel W.
– Daniel W., Commented Jun 22, 2017 at 0:47
in general, if you are storing HTML in javascript variables, you are probably not using angular in the best manner. — Claies
– Claies, Commented Jun 22, 2017 at 0:55

Ahmed Mostafa · Accepted Answer · 2017-06-22 00:48:02Z

1

inject $sce Service in your controller and use it like below

app.controller('mainCtrl',function($sce , $scope){
     $scope.job = {
        description : $sce.trustAsHtml("<p><strong>Our Responsibilities</strong></p>")
    };

    })

$sce Reference

answered Jun 22, 2017 at 0:48

Ahmed Mostafa

6961 gold badge4 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Elaine Byene Over a year ago

Thanks. However, that's not the only html tag and so hard coding it doesn't make sense. The {{job.description}} is also 2 pages long of html codes.

Collectives™ on Stack Overflow

HTML codes showing up when using ng-bind-html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related