Question

代码：

var appModule = angular.module('lookbookApp',
    [
        'ngSanitize',
    ])

appModule.filter('to_trusted', ['$sce', function ($sce) {
    return function (text) {
        return $sce.trustAsHtml(text);
    };
}]);

<div class="text pre-txt" ng-bind-html="caseStudy.Overview | to_trusted"></div>

caseStudy.Overview的内容：

<ul>
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
    <li>dddd</li>
</ul>

预期产出：

<ul>
  <li>aaaa</li>
  <li>bbbb</li>
  <li>cccc</li>
  <li>dddd</li>
</ul>

我已经阅读了关于此问题的互联网文章，但我的无序列表仍然显示为：

   aaaa
   bbbb
   cccc
   dddd

如何解决此问题？

Answer 1

如果我理解正确，那么你想渲染HTML而不是渲染文本。

如果是这种情况，则不应使用ng-bind-html

<强>纳克绑定-HTML
ng-bind-html呈现html而不是显示html标记。

查看差异here。

使用此代码

<!DOCTYPE html>
<html ng-app="lookbookApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script src="script.js"></script>
    <script src="https://code.angularjs.org/1.5.8/angular-sanitize.js"></script>
  </head>

  <body ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <div class="text pre-txt" ng-bind="caseStudy.Overview | to_trusted"></div>
    
    <script>
      
      var appModule = angular.module("lookbookApp", ['ngSanitize']);

      appModule.controller("myCtrl", ['$scope', function($scope) {
        $scope.test = "Hello World";
        $scope.caseStudy = {};
        $scope.caseStudy.Overview = '<ul><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>';
      }]);
      
      
      appModule.filter('to_trusted', ['$sce', function ($sce) {
          return function (text) {
              return $sce.trustAsHtml(text);
          };
      }]);


      
    </script>
  </body>

</html>

<强>输出

<ul><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>

Answer 2

您的代码效果很好。

$scope.caseStudy = {
    "Overview": "<ul><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>"
};

查看demo。

AngularJS的ng-bind-html指令无法正确显示无序列表

2 个答案: