Question

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

在我的模板中，我有：

<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

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

ng-bind-html显示未关闭的标签

1 个答案: