While I might be arriving late to the discussion, allow me to offer a different viewpoint on your query:
What exactly constitutes the "angular way" within this particular scenario?
I found myself pondering the same conundrum and arrived at the following realization:
- The concept of "Angular way" should not be seen as diametrically opposed to the "jQuery way", primarily because jQuery isn't a framework per se (a fact that leaves many developers questioning why it's not a default feature in all browsers)
- When it comes to altering model data within an application, adhering to the "Angular way" is advisable
In your instance, where tracking needs to be implemented for external links without impacting any application-specific data, opting for a solution that's easy to maintain seems prudent (anticipating future scenarios where tracking may need to be modified or removed altogether).
1) As previously suggested in the comments, one can tackle this with pure JavaScript:
var externalLinks = document.querySelectorAll('a[href^="http://"]');
for (i = 0; i < externalLinks.length; ++i) {
var link = externalLinks[i];
link.addEventListener('click', function(e) {
// track me
});
}
http://jsfiddle.net/a7fg217h/1/
2) Another Angular-based solution could involve:
.directive('extLink', function() {
return {
restrict: 'A',
link: function(scope, elem) {
console.log(elem);
elem.bind('click', function(e) {
console.log(e);
});
}
};
})
The only variation from the existing answer pertains to utilizing this directive as an attribute:
<a ext-link href="http://google.com">Link</a>
http://plnkr.co/edit/OhPfEzwDK3j4d17O86oo?p=preview