javascript - 解析元素标题中的html元素

Question

我有一个文本区域元素

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

我有另一个元素图标，它在悬停时显示来自 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 进行编码。这是因为您确实必须信任文本的来源，因为允许将脚本标记注入(inject)页面可以完全控制您的整个站点，包括访问身份验证 token 。对您在这里尝试做的事情要非常非常小心。

您可以创建一个允许显示 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 进行绑定(bind)，但不确定是否可以使用 title 属性。