AngularJS ng-bind-html not rendering list tags

Question

I have a simple HTML document, like...

<ol>
    <li><strong>Test 1</strong></li>
    <li><strong>Test 2</strong></li>
</ol>

...and I want to bind it to a div with ng-bind-html, but the HTML tag <ol> (or <li>) is not rendered.

The result I have is:

<strong>Test 1</strong>
<strong>Test 2</strong>

Any ideas?

Can you post your css file?

user5845413
– user5845413

2017-09-26 11:59:13 +00:00
Commented Sep 26, 2017 at 11:59 — user5845413
– user5845413, Commented Sep 26, 2017 at 11:59

user4656987 · Accepted Answer · 2017-09-27 12:03:33Z

1

In order to use ng-bind-html, you need to include ngSanitize in your app declaration

answered Sep 27, 2017 at 12:03

user4656987

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

Comments

user8317956 · Accepted Answer · 2017-09-26 12:00:01Z

* {
  padding: 0;
  margin: 0;
}
ol li {
  list-style: none;
}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <div ng-bind-html="myText"></div>

  </div>

  <script>
    var app = angular.module("myApp", ['ngSanitize']);
    app.controller("myCtrl", function($scope) {
      $scope.myText = "<ol><li><strong>Test 1</strong></li><li><strong>Test 2</strong></li></ol>";
    });
  </script>
</body>

</html>

ng-bind-html directive does it all. For more info, please visit https://docs.angularjs.org/api/ng/directive/ngBindHtml

phani indra · Accepted Answer · 2017-09-26 12:36:08Z

0

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <span ng-bind-html="trustedHtml"></span>
  </div>

  <script>
    var app = angular.module("myApp",[]);
    app.controller("myCtrl",["$scope","$sce", function($scope,$sce) {
    $scope.html = '<ol><li><strong>Test 1</strong></li><li><strong>Test 2</strong></li></ol>';
    $scope.trustedHtml = $sce.trustAsHtml($scope.html);
    }]);
  </script>
</body>

</html>

answered Sep 26, 2017 at 12:36

phani indra

2531 silver badge10 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-bind-html not rendering list tags

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