Question

我有一个html类型的数据，它是从文本编辑器中保存的，

<p style=\"font-size: 14px;text-align: justify;\">
 <a href=\"https://www.xpertdox.com/disease-description/Chronic%20Kidney%20Disease\" style=\"background-color: transparent;\">Chronic kidney disease</a>, 
<p>also known as chronic kidney failure, is a condition characterized by gradual loss of kidney function and affects around 26 million adults in the United States.
The kidneys are supposed to filter excess fluid and waste from the blood which is then excreted in the urine via the bladder.</p>

显示时我们使用

ng-bind-html

在角度js但我使用的是静态html页面（AMP）。因此，我如何在一个简单的html中显示这些内容。任何人都可以帮助我。在放大器中我只有使用插值的范围（{{}}）。任何人都可以建议我帮忙。谢谢。

Answer 1

ng-bind-html 需要将代码设为Html，因为我们使用$sce.trustAsHtml()，查看示例

var app = angular.module("app", []);

app.controller("ctrl", [
  "$scope", "$sce",
  function($scope, $sce) {
    var html = "<p style=\"font-size: 14px;text-align: justify;\">" +
      "<a href=\"https://www.xpertdox.com/disease-description/Chronic%20Kidney%20Disease\" style=\"background-color: transparent;\">Chronic kidney disease</a>, " +
      "<p>also known as chronic kidney failure, is a condition characterized by gradual loss of kidney function and affects around 26 million adults in the United States." +
      "The kidneys are supposed to filter excess fluid and waste from the blood which is then excreted in the urine via the bladder.</p>";

    $scope.content = $sce.trustAsHtml(html);
    $scope.content2 = html;
  }
]);


app.filter("trustAsHtml", function($sce) {
  return function(html) {
    return $sce.trustAsHtml(html);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="app" ng-controller="ctrl">
  <h1>convert to Html from controller</h1>
  <div ng-bind-html="content"></div>
  <h1>convert to Html with filter</h1>
  <div ng-bind-html="content2 | trustAsHtml"></div>
</div>

如何在html中显示html类型保存的内容？

1 个答案: