1 

 angular.module('form', []).controller('formcontroller', ['$scope', function($scope) { $scope.input; $scope.hello = "<h1> Welcome</h1>"; } ]);
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <form ng-app="form" ng-controller="formcontroller"> <span ng-bind="hello"></span> <span ng-bind-html="hello"></span> </form> </body> </html>

I tried by using

It results in the output as 

<h1> Welcome</h1>

I tried by replacing ng-bind-html is not woking and throws an error.

<script> angular.module('form', []).controller('formcontroller', ['$scope', function($scope) { $scope.hello="<h1> Welcome</h1>"; }]); </script>

Error: $sce:unsafe Require a safe/trusted value Attempting to use an unsafe value in a safe context.

Please explain.

Improve this question
1
  • why did you remove answer? Commented Dec 2, 2016 at 12:02

4 Answers 4

Reset to default
3

If you include the angular-sanitize script, inputs are sanitized by parsing the HTML into tokens

var miAp = angular.module('miAp', ['ngSanitize']); miAp.controller('demoController', function($scope) { $scope.bar = "<h1> Welcome</h1>"; });
<html> <head> <meta charset="utf-8"> <title>ngBind</title> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js" type="text/javascript"></script> <script src="cookies.js"></script> </head> <body ng-app="miAp" ng-controller="demoController"> <div ng-bind-html="bar"></div> </body> </html>

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

Comments

1

You can install and include ngSanitize.

This should fix the error.

Improve this answer

1 Comment

you are true. Problem is with ngSanitize.
0

When you use ng-bind-html to bind html string , that html need to be marked safe to prevent prevent XSS and other security issues . This is checked by Angular's Strict Contextual Escaping (SCE) mode that enabled by default .

You can see more in this link : https://docs.angularjs.org/error/$sce/unsafe .

To resolve this problem, you can view this issue : With ng-bind-html-unsafe removed, how do I inject HTML?

Hope this help ! Thanks

Improve this answer

Comments

-2

Try This

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js" type="text/javascript"></script> var App = angular.module('sanitize', ['ngSanitize']); App.controller('demoController', function($scope) { $scope.bar = "<h1> Welcome</h1>"; }); <h1 data-ng-bind="hello"></h1>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.