javascript - ng-bind-html 显示未封闭的标签

Question

这个问题已经有答案了:

Insert HTML into view from AngularJS controller (17 个回答)

已关闭 6 年前。

我正在尝试对某些文本实现搜索功能，该功能会突出显示正在搜索的字符(如果存在)。但是，我遇到了一些奇怪的情况，其中某些字符( < )没有显示。

在我的模板中，我有:

<span ng-bind-html="action.text | highlight: search.criteria.text:(!search.excludeScenesAndActions && search.active)"></span>

这是我的过滤器:

filters.filter('highlight', function () {
    return function (text, search, enabled, caseSensitive) {
        if (typeof (enabled) === 'undefined')
            enabled = true;

        if (enabled && text && (search || angular.isNumber(search))) {
            text = text.toString();
            search = search.toString();

            if (caseSensitive) {
                return text.split(search).join('<span class="search-match">' + search + '</span>');
            } else {
                return text.replace(new RegExp('(' + search + ')', 'gi'), '<span class="search-match">$&</span>');
            }
        } else {
            return text;
        }
      };
    }
);

我遇到的问题是 ng-bind-html在模板中，如果我的文本是 <foo>bar <foo ，它将显示为bar因为我正在尝试渲染 <foo>和<foo标签。我已经尝试过我们ng-bind效果很好，但我想实际渲染 <span>那就是

Answer 1

在 index.html 中包含 angular-sanitize.min.js 文件，并在您要创建模块的位置添加应用依赖项 angular.module( 'appName', ['ngSanitize'])。就是这样，它会工作得很好。只要确保你的返回值是正确的