How to output html through AngularJS template?

Question

<h1>{{ revision.title }}</h1>

<div ng-bind-html="revision.content"></div>

The title outputs fine, but the content - doesn't. It's got some html in it and I get the following error: Attempting to use an unsafe value in a safe context. which is being described as so: http://docs.angularjs.org/error/$sce:unsafe and that's fine, but then how can I output the content as there will be some html in it and so I must set it to {{ revision.content | safe }} or smthn. What is the correct way?

EDIT:

AngularJS version: 1.2

score 110 · Accepted Answer · edited Nov 07 '16 at 20:29

110

So the fix is this:

include angular-sanitize.min.js from http://code.angularjs.org/ and include it in your module:

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

and then you're free to use ng-bind-html

edited Nov 07 '16 at 20:29

ahmed hamdy

5,096
1
47
58

answered Nov 04 '13 at 15:02

Xeen

6,955
16
60
111

2

2 years later in 1.4.x, this deceptively simple fix still works! – xiankai Sep 17 '15 at 04:11
It fixed my problem, when I used **$compile** – vanduc1102 Sep 22 '15 at 10:28

score 4 · Answer 2 · answered Apr 11 '16 at 13:37

4

I know it's an older question, but you can also trust the value using $sce in your controller:

$scope.revision.content = $sce.trustAsHtml($scope.revision.content);

After that, ng-bind-html will work.

answered Apr 11 '16 at 13:37

Felix Engelmann

399
5
17

score 3 · Answer 3 · edited Aug 17 '15 at 17:50

I created an ng-html directive that does the same basic thing that ng-bind-html-unsafe used to do. However, I strongly suggest that you only use it with caution. It could easily open your site up to malicious attacks. So know what you're doing before you implement it:

.directive('ngHtml', ['$compile', function($compile) {
    return function(scope, elem, attrs) {
        if(attrs.ngHtml){
            elem.html(scope.$eval(attrs.ngHtml));
            $compile(elem.contents())(scope);
        }
        scope.$watch(attrs.ngHtml, function(newValue, oldValue) {
            if (newValue && newValue !== oldValue) {
                elem.html(newValue);
                $compile(elem.contents())(scope);
            }
        });
    };
}]);

And then you would use it as:

<div ng-html="revision.content"></div>

Hope that helps.

thanks for the directive, works great! just the last line is missing a closing ] - should be `}]);` — paul, Oct 29 '14 at 18:44

score 2 · Answer 4 · answered Nov 04 '13 at 14:43

2

What version are you using? If you are using less than 1.2 you can try ngBindHtmlUnsafe

answered Nov 04 '13 at 14:43

Michael B

7,512
3
31
57

score 0 · Answer 5 · edited May 23 '17 at 12:26

according to Official AngularJs Doc about ngBindHtml you must inject ngSanitize into your app dependencies

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.

Then you can install ngSanitize module by there ways:

1 - using bower

bower install --save angular-sanitize

2 - using npm

npm install --save angular-sanitize

3 - manually by download angular-sanitize.js file from code.angularjs.org path which include all angularJs files categories by version number like @Xeen answer

See More about install ngSanitize module from Oficial angularJs github repository for install angular-sanitize

How to output html through AngularJS template?

5 Answers5

Linked