0

I have a filter which turns hashtags into links: 

app.filter('hashtags', function($filter) {
  return function(text, target) {
    if (!text) return text;
    var replacedText = text.replace(/#(\w*[a-zA-Z_]+\w*)/gim, '<a ng-href="/posts?q=%23$1">#$1</a>');
    return replacedText;
  };
});

However, when it is displayed on the page, the hashtag is clickable and surrounded in anchor tags, but the ng-href is no where to be found. It looks like this.

<a>#hashtag</a>

Why is the angular directive not showing up?

It may be worth noting that classes show up. If I were to change this line to read:

var replacedText = text.replace(/#(\w*[a-zA-Z_]+\w*)/gim, '<a class="test" ng-href="/posts?q=%23$1">#$1</a>');

The output in HTML would be:

<a class="test">#hashtag</a>
George Stocker
  • 57,289
  • 29
  • 176
  • 237
Trevor Hutto
  • 2,112
  • 4
  • 21
  • 29

1 Answers1

2

ng-href would need to be pulled out of the filter and put into the template in which it is to be used.

<div ng-repeat="tag in tags">
    <a class="test" ng-href="{{tag | hashtag}}">{{tag}}</a>
</div>

The reason for this is that angular doesn't $compile when filtering.

See:

Community
  • 1
  • 1
jmunsch
  • 22,771
  • 11
  • 93
  • 114