CODEWITHSUNDEEP
javascriptangularjsng-bind-html
kramer65
kramer65

Reputation: 53843

Combining ng-repeat and ng-bind-html?

I've got a list of messages of which the text includes some html which I want to display. So as suggested here and here what I'm currently trying is this:

<div ng-repeat="message in messages">
    {{ message.sender_name }} - <div ng-bind-html="message.text"></div>
</div>

It displays the message.sender_name, but not the message.text. When I simply do {{ message.text }} it displays the text correctly (but displaying the raw <br>s without rendering them).

Does anybody know why this is not working?

Upvotes: 0

Views: 499

Answers (2)

Sudarshan Kalebere
Sudarshan Kalebere

Reputation: 3929

ng-bind-html Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application. By the way this is the description from angular js documentation. You can also see examples of using angular-sanitize with ng-bind-html there.

Good luck.

Upvotes: 1

PSL
PSL

Reputation: 123739

ngBindHtml directive needs $sce service to parse and display the bound html. So you would need to include ngSanitize module in your module decalaration as a dependency for ng-bind-html to work.

You can download appropriate version of it from :- http://ajax.googleapis.com/ajax/libs/angularjs/1.X.Y/angular-sanitize.js

Ex:-

angular.module('myApp', ['ngSanitize', ..otherdeps]);

Upvotes: 2

Related Questions