AngularJS directives not showing in the source HTML

Question

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>

Community · Accepted Answer · 2017-05-23 11:43:42Z

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:

AngularJS + highlight.js (to evaluate string with expression in directive)

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Jun 3, 2015 at 1:58

jmunsch

24.3k12 gold badges102 silver badges120 bronze badges

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

Collectives™ on Stack Overflow

AngularJS directives not showing in the source HTML

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related