ng-bind is working fine, Why ng-bind-html is not working

Question

   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.

why did you remove answer? – Sajeetharan Dec 02 '16 at 12:02 — Sajeetharan, Dec 02 '16 at 12:02

score 3 · Accepted Answer · answered Dec 02 '16 at 10:34

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>

score 1 · Answer 2 · answered Dec 02 '16 at 10:34

1

You can install and include ngSanitize.

This should fix the error.

answered Dec 02 '16 at 10:34

vjarysta

61
1
7

you are true. Problem is with ngSanitize. – hari prasad Dec 02 '16 at 11:09

score 0 · Answer 3 · edited May 23 '17 at 12:13

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

kaushik samanta · Answer 4 · 2016-12-02T10:52:00.583

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

edited Dec 02 '16 at 10:52

answered Dec 02 '16 at 10:32

kaushik samanta

95
1
4

ng-bind is working fine, Why ng-bind-html is not working

4 Answers4