Angularjs filter removing custom attributes such as "tooltip"

Question

I'm relatively new to angularjs. I'm trying to write a filter take a block of text and wrap certain words in an html tag, namely the link tag. The ultimate reason for wanting to do so is to enable ui-bootstrap tooltips on certain words, based on user input (for example, the search word or "key" might be entered via an input form field).

This is my filter (based on 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>');
    };

It works, in so far as the href and the class show up in the output. However, the attributes "tooltip-placement" and "tooltip" get filtered out. I would think this is an html filtering issue except it's letting href and class through.

The output html looks like:

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

Also note I'm using 1.2.1 so there's no ng-bind-html-unsafe (thus the $sce).

Any ideas? I'm kinda stumped here.

Also, perhaps I'm going about this all wrong?

@R3tep - no, but would that cause custom attributes to be ignored by the filter? My question is specifically about just getting any arbitrary 'attribute' into the link element. — PeterG
– PeterG, Commented Jan 30, 2014 at 22:38

SveinT · Accepted Answer · 2014-01-30 23:37:55Z

2

You forgot to call $sce.trustAsHtml.

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

That said, I couldn't get the replacement to work, but I created a proof of concept:

http://jsfiddle.net/7H7A8/

answered Jan 30, 2014 at 23:37

SveinT

7035 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PeterG Over a year ago

that worked. I was putting trustAsHtml() in the wrong spot. thanks!

Collectives™ on Stack Overflow

Angularjs filter removing custom attributes such as "tooltip"

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related