AngularJS ng-bind-html не отображает теги списка

У меня есть простой HTML-документ, например ...

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

... и я хочу привязать его к div с помощью ng-bind-html, но HTML-тег <ol> (или <li>) не отображается.

Результат у меня такой:

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

Любые идеи?


javascript html angularjs ng-bind-html
person BartB    schedule 26.09.2017    source источник
comment
Можете ли вы опубликовать свой файл css?   -  person    schedule 26.09.2017

Ответы (2)


arrow_upward
1
arrow_downward

Чтобы использовать ng-bind-html, вам необходимо включить ngSanitize в объявление вашего приложения.

person Community    schedule 27.09.2017

arrow_upward
0
arrow_downward 

* {
  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 делает все. Для получения дополнительной информации посетите https://docs.angularjs.org/api/ng/directive/ngBindHtml

person Community    schedule 26.09.2017