Angularjs：预览已清理的HTML

Question

请找到plnkr

我想显示一些html预览。 html已经在服务器上进行了清理（例如："<b>HELLO</b>"）。如何显示html表单。在示例中，我想显示为myHtml2显示的myHtml（第一次预览）。

HTML

 <div ng-controller="myController">
      <div ng-bind-html="myHtml"></div>
      <div ng-bind-html="myHtml2"></div>
      <div >{{myHtml2}}</div>
    </div>

JS

myApp.controller('myController', ['$scope', '$sce', function myController($scope, $sce){
  $scope.myHtml = "<b>HELLO</b>";
  $scope.myHtml2 = "&lt;b&gt;HELLO&lt;/b&gt;";      
}]);

出

HELLO
<b>HELLO</b>
&lt;b&gt;HELLO&lt;/b&gt;

Answer 1

您只需在客户端上使用$sce.trustAsHtml和unsanitize HTML：http://plnkr.co/edit/h2loxWsPJOELhNvkfHmK?p=preview

// From: https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript
function htmlDecode(input){
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

myApp.controller('myController', ['$scope', '$sce', function myController($scope, $sce){
  $scope.myHtml = "<b>HELLO</b>";
  $scope.myHtml2 = $sce.trustAsHtml(htmlDecode("&lt;b&gt;HELLO&lt;/b&gt;"));

}]);

htmlDecode来自：Unescape HTML entities in Javascript?

但是，我不建议采用这种方法。感觉非常hackish，我怀疑可能导致您网站上的漏洞。