Question

我对angularjs比较新。我正在尝试编写一个过滤器，取一个文本块并将某些单词包装在html标记中，即链接标记。想要这样做的最终原因是根据用户输入启用特定单词上的ui-bootstrap工具提示（例如，搜索词或“键”可能通过输入表单字段输入。）

这是我的过滤器（基于angular-ui'突出显示'：https://github.com/angular-ui/ui-utils/blob/master/modules/highlight/highlight.js） -

.filter('annotate', function ($sce) {
    return function (text, search) {
        text = text.toString();
        search = search.toString();
        return text.replace(new RegExp(search,'gi'), '<a href="#" class="mycoolstyle" tooltip-placement="top" tooltip="test">$&</a>');
    };

只要href和类出现在输出中，它就可以工作。但是，“tooltip-placement”和“tooltip”属性会被过滤掉。我认为这是一个html过滤问题，除了它让href和类通过。

输出html如下所示：

<p ng-bind-html="contentStr | annotate:key" class="ng-binding">Hello World check out my <a href="#" class="mycoolstyle">foo</a> bar app</p>

jsFiddle：http://jsfiddle.net/petersg5/76WZf/

另请注意我使用的是1.2.1，因此没有ng-bind-html-unsafe（因此$ sce）。

有什么想法吗？我有点难过。

另外，也许我说这一切都错了？

Answer 1

你忘了给$ sce.trustAsHtml打电话。

return $sce.trustAsHtml(text.replace(new RegExp(search,'gi'), '<a href="#" class="mycoolstyle" tooltip-placement="top" tooltip="test">$&</a>'));

那就是说，我无法让替补工作，但我创造了一个概念证明：

http://jsfiddle.net/7H7A8/

Angularjs过滤器删除自定义属性，例如“工具提示”

1 个答案: