Adding an ng-click event inside a filter

Question

I am new to Angular, but I have been using it in the last few weeks and have been able to solve most of the problems that I have encountered. Nevertheless, it puzzled me.

I have an application that retrieves tweets from Twitter, and then - using the Angular filter - pulls out all the URLs and style them as links. This part works fine, but the client decided that the links from Twitter are not safe, so they wanted the disclaimer to work every time the link was clicked. Simple enough - I hijacked a link and changed href to ng-click="openLink('url')" . There was a problem here - ng-click does not work.

I am sure that the problem has something to do with $compile() - I used to have similar problems, but I have no idea when and where it can be called.

I created Plunkr , which is a lite version of what I need. The link above does not load dynamically and the alertUrl() function alertUrl() , but all the links generated by the filter fail.

I probably missed something very simple, but now it has eavesdropped on me, so any help would be greatly appreciated.

Thank,
Sam

Answer 1

Well, you're right that the html \ content you emit must be compiled for angularjs to enable the warning function.

I changed your plunker and introduced a compilation directive (from here )

See in action here

The main idea here is to compile content created from twitter dynamically.

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