angularjs - Adding an ng-click event inside a filter

Question

I'm fairly new to Angular but I've been using it the past few weeks and have managed to work out most of the problems I've come across. This one however has me stumped.

I have an app that pulls in tweets from Twitter then - using an angular filter - pulls out all the urls and styles them as links. This part works fine but the client decided that links from Twitter were't safe so they wanted a disclaimer to fire every time a link was clicked. Simple enough - I hijacked the link and swapped the href for an ng-click="openLink('url')". This is where the problem occurred - the ng-click doesn't work.

I'm pretty sure the problem has something to do with $compile() - I've had similar issues before - but I have no idea when or where to call it.

I've created a Plunkr that is a lite version of what I'm after. The link at the top isn't loaded in dynamically and fires the alertUrl() function fine, but all the links generated by the filter fail.

I'm probably missing something really simple but it's been bugging me a while now so any help will be massively appreciated.

Thanks,
Sam

Answer 1

Well you are correct that the htmlcontent that you emit needs to be compiled for angularjs to resolve the alert function.

I have changed your plunker, and inject a compile directive (from here)

See it in action here

The basic idea here is to compile the content produced from twitter feed dynamically.

<p compile="tweet.text | convertLinks"></p>