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.

hari prasad
  • 75
  • 1
  • 10

4 Answers4

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>
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
1

You can install and include ngSanitize.

This should fix the error.

vjarysta
  • 61
  • 1
  • 7
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

Community
  • 1
  • 1
Tan Le
  • 187
  • 4
-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>
kaushik samanta
  • 95
  • 1
  • 4