javascript - Angularjs 过滤器删除自定义属性，例如 "tooltip"

Question

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

这是我的过滤器(基于 angular-ui 'highlight': 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 和 class 通过。

输出 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/