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

ahmed hamdy · Accepted Answer · 2016-11-07 20:29:52Z

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 7, 2016 at 20:29

ahmed hamdy

5,1891 gold badge50 silver badges60 bronze badges

answered Nov 4, 2013 at 15:02

Xeen

7,02317 gold badges69 silver badges114 bronze badges

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

2 Comments

xiankai Over a year ago

2 years later in 1.4.x, this deceptively simple fix still works!

vanduc1102 Over a year ago

It fixed my problem, when I used $compile

Felix Engelmann · Accepted Answer · 2016-04-11 13:37:51Z

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, 2016 at 13:37

Felix Engelmann

4375 silver badges18 bronze badges

Comments

scniro · Accepted Answer · 2015-08-17 17:50:50Z

3

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.

edited Aug 17, 2015 at 17:50

scniro

17k8 gold badges67 silver badges108 bronze badges

answered Nov 4, 2013 at 15:02

tennisgent

14.2k9 gold badges52 silver badges48 bronze badges

1 Comment

paul Over a year ago

thanks for the directive, works great! just the last line is missing a closing ] - should be }]);

Michael B · Accepted Answer · 2013-11-04 14:43:38Z

2

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

answered Nov 4, 2013 at 14:43

Michael B

7,6173 gold badges35 silver badges60 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:26:13Z

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

Collectives™ on Stack Overflow

How to output html through AngularJS template?

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related