解析元素标题中的 html 元素

Question

我有一个文本区域元素

<textarea ng-model="text"></textarea>

我有另一个元素图标，悬停时显示文本区域元素中的文本

<i class="k-icon k-i-paste-plain-text" title="{{text}}">

一切正常;直到用户在文本框中键入html，例如： 如果文本是"<b>some random text </b>"，那么，在标题中它也显示

<b>some random text </b>

我想知道如何解析它并仅附加标题中的文本。

Answer 1

Angular 在显示 html 之前会自动对文本中的 html 进行编码。这是因为您确实必须信任文本的来源，因为允许将脚本标签注入页面可以完全控制整个站点，包括访问身份验证令牌。非常非常小心你在这里试图做的事情。

您可以创建一个允许显示 html 的过滤器

app.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});

并与之一起使用

<i class="k-icon k-i-paste-plain-text" title="{{text | unsafe}}">

let app = angular.module('app', [])
.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<textarea ng-model="text"></textarea>
<div ng-bind-html="text | unsafe"></div>
</div>

似乎您需要与ng-bind-html绑定，不确定是否可以使其与title属性一起使用。