CODEWITHSUNDEEP
javascriptangularjs
EJohs
EJohs

Reputation: 23

Why is my $sce.trustAsHtml content being rendered as plain text?

I am not sure what I am missing here but for some reason my iFrame is being rendered as text instead of HTML. We are using Angular 1.3.15.

Here is my view:

<span ng-bind-html="question.questionLabel"></span>

Here is my controller:

vm.questionLabel = $sce.trustAsHtml('<iframe width="560" height="315" src="https://www.youtube.com/embed/3aL9qqWRm7E" frameborder="0" allowfullscreen></iframe>');

And the following is what is getting rendered to the page in text form: 

<iframe width="560" height="315" src="https://www.youtube.com/embed/3aL9qqWRm7E" frameborder="0" allowfullscreen></iframe>

I have injected ngSanitize into the controller as well. I see no errors in the logs. I am at a loss. Can someone please help?

Thanks!

Upvotes: 2

Views: 346

Answers (2)

EJohs
EJohs

Reputation: 23

I incorrectly injected ngSanitize into my controller. It is working now.

Thank you all!

Upvotes: 0

User2
User2

Reputation: 1293

Use ngSanitize

Please check this working example: http://plnkr.co/edit/RPOznM12iwVNZjv6MiO8?p=preview

Download file - angular-sanitize.js and include it in your app.

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

app.controller('myController', function($scope) {
    $scope.html = '<p>Your html code</p>';
});

<div ng-app="myApp">
     <div ng-controller="myController">
        <p ng-bind-html="html"></p>
     </div>
</div>

Upvotes: 2

Related Questions