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编码为文本。这是因为您确实必须信任文本的来源，因为允许将脚本标签注入页面中，从而可以完全控制整个站点，包括对身份验证令牌的访问。在这里尝试做的事情要非常小心。

您可以创建一个允许显示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属性一起使用。

解析元素标题中的html元素

1 个答案: