如何将$se.trustAsHtml与一些HTML节点一起使用

How to use $sce.trustAsHtml with some HTML node

本文关键字：HTML 节点 一起 se trustAsHtml      更新时间：2023-09-26

我面临的问题是，我从服务器获得了一些表示html的字符串我需要解析一些节点的样式属性，然后用Angular在视图中显示这个html。

所以我看到了这个答案https://stackoverflow.com/a/494348/1022726帮助我创造从字符串中提取一个html节点，然后我遍历每个项目并更改样式。最后，我用innerHTML的值做了$sce.trustAsHtml。

我有这个代码http://plnkr.co/edit/HUfAGR2uNMwb48rqXbkk?p=preview

<div ng-bind-html="trustedHtml"></div>
function($scope, $sce) {
  var s = '<h1 style="color: red; font-size: 16px;">Subheader</h1><p style="font-size: 12px;">text</p>';
  var div = document.createElement('div');
  div.innerHTML = s;
  $(div).find("*").each(function () {
    $(this).height('100px');
  });
  $scope.trustedHtml = $sce.trustAsHtml(div.innerHTML);
}]);

我想知道是否有更好的方法来解析表示html的字符串，然后在视图中显示该html。感谢您的帮助。

你可以把它变成一个过滤器，比如

app.filter('trusted', function($sce){
  return function(text) {
    return $sce.trustAsHtml(text);
  };
});

然后在你的html中你可以有

<div ng-bind-html="text | trusted"></div>
相关文章：