AngularJS ng-bind-html 不呈现列表标签答案

【问题标题】：AngularJS ng-bind-html not rendering list tagsAngularJS ng-bind-html 不呈现列表标签
【发布时间】：2017-09-26 11:56:58
【问题描述】：

我有一个简单的 HTML 文档，比如...

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

...我想用ng-bind-html 将它绑定到div，但是没有呈现HTML 标记<ol>（或<li>）。

我得到的结果是：

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

有什么想法吗？

【问题讨论】：

你能发布你的css文件吗？

标签： javascript html angularjs ng-bind-html

【解决方案1】：

为了使用 ng-bind-html，你需要在你的应用声明中包含 ngSanitize

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：