Angularjs filter removing custom attributes such as "tooltip"

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': --

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


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?


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:

Need Your Help

Remove further inputs in Joomla k2 submission form and just keep Extra-Fields inputs

javascript php html joomla joomla-k2

I'm going to use Joomla K2 component as a directory system only, So just show Extra-Fields in front-end contents.

C# linq and sorting

linq sorting

With linq I want to use order by with specific column but I need two switches because i don't know how to use desc or asc in one