AngularJS v1.4.2 ng-bind-html and ng-bind-html-unsafe don't work

Question

I'm using AngularJS v1.4.2 and like to print out html from a variable in the $scope.

I tried to use ng-bind-html and ng-bind-html-unsafe but both are not working.

Here is my controller:

var ctrl = angular.module('app.ctrl',['app.model'])
        .controller('Controller',function($scope, $log, Model){
            $log.warn("controller für View wurde erstellt");
            $log.log(Model.getValue());
            $scope.sayHello="Hello World!";
            $scope.sayHelloHtml="<strong>Hello World Fett</strong>";
        });

And my HTML code:

...
<div ng-controller="Controller">Meine erste angularJS View {{ sayHello }}
<div ng-bind="sayHello"></div>
<div ng-bind-html="sayHelloHtml"></div>
</div>
...

HTML content in variables has to be trusted, else the HTML is stripped out. use the $sce to trust your HTML content. see docs.angularjs.org/api/ng/service/$sce — Claies
– Claies, Commented Jul 15, 2015 at 12:41

RIYAJ KHAN · Accepted Answer · 2015-07-15 12:40:49Z

3

var ctrl = angular.module('app.ctrl',['app.model','ngSanitize'])
        .controller('Controller',function($scope, $log, Model,'$sce'){
            $log.warn("controller für View wurde erstellt");
            $log.log(Model.getValue());
            $scope.sayHello="Hello World!";
            $scope.sayHelloHtml="<strong>Hello World Fett</strong>";

            $scope.sayHelloHtml = $sce.trustAsHtml($scope.sayHelloHtml);
        });

HTML

 <div ng-controller="Controller">Meine erste angularJS View {{ sayHello }}
            <div ng-bind="sayHello"></div>
            <div ng-bind-html="sayHelloHtml"></div>
            <div ng-bind-html-unsafe="sayHello"></div>
            </div>

Make sure you have include angular-sanitize.js and injected ngSanitize module in app and injected $sce in your controller.

answered Jul 15, 2015 at 12:40

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

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

Comments

Marco Talento · Accepted Answer · 2015-07-15 12:42:02Z

0

It's necessary to use the $sce (Strict Contextual Escaping service)

$scope.sayHelloHtml = $sce.trustAsHtml("Hello World Fett");

answered Jul 15, 2015 at 12:42

Marco Talento

2,4052 gold badges22 silver badges31 bronze badges

Comments

Damiano Ferrante · Accepted Answer · 2015-07-15 12:42:21Z

0

according to the docs for ng-bind-html you need to add ngSanitize to your module dependencies for it to work correctly, which looks like you didn't ;)

Check the example on https://docs.angularjs.org/api/ng/directive/ngBindHtml for further details.

Cheers D

answered Jul 15, 2015 at 12:42

Damiano Ferrante

1514 bronze badges

Collectives™ on Stack Overflow

AngularJS v1.4.2 ng-bind-html and ng-bind-html-unsafe don't work

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related