CODEWITHSUNDEEP
angularjs
Dalvir Saini
Dalvir Saini

Reputation: 390

ng-bind-html and unsafe not working

I am using the following version of Angularjs and trying to bind property called Description, that containing html tags, with my template. I tried to use
{{Description | unsafe}} -- rendering html as string
ng-bind-html-unsafe -- nothing rendering
ng-bind-html -- nothing rendering

Files: 

<script src="https://storage.googleapis.com/vendortoolkit/Scripts/angular.min.js"></script>
<script src="https://storage.googleapis.com/vendortoolkit/Scripts/angular-route.js"></script>

How html string can be rendered as html?

Upvotes: 0

Views: 1375

Answers (2)

Vinit Desai
Vinit Desai

Reputation: 520

For ng-bind-html to work as expected, you need to include angular-sanitize library and ngSanitize as a dependency injection. Sharing here an example for the same. Hope, this helps.

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1>John Doe</h1>";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

    <p ng-bind-html="myText"></p>

</div>

Upvotes: 1

Shantanu
Shantanu

Reputation: 3513

Make use of $sce service. Inject $sce to your controller & then use trustAsHtml method. In controller add code as:

$scope.desc = $sce.trustAsHtml($scope.Description);

Where $scope.Description is a string containing html tags

Then, bind on template with ng-bind-html :

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

Upvotes: 1

Related Questions