Home » Html » How to output html through AngularJS template?

How to output html through AngularJS template?

Posted by: admin November 30, 2017 Leave a comment

Questions:
<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

Answers:

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

Questions:
Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

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