Question

我有一个简单的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>

有什么想法吗？

Answer 1

要使用ng-bind-html，您需要在应用声明中包含ngSanitize

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

ng-bind-html指令完成所有工作。有关详细信息，请访问https://docs.angularjs.org/api/ng/directive/ngBindHtml

Answer 3

＆＃13;

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

＆＃13;

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

3 个答案: