AngularJS Anchor <a> Replacement Filter - angularjs

Question

I need a filter for AngularJS that takes a string and finds the anchor tags and replaces the href with an:
The input comes from a third party API, is of variable length and could have zero or a thousand instances of tags in.
Sample input would be:
<p ng-html-bind="someScopedVariable | replaceAnchor"></p>
The filter would be:
angular.module('imApp').filter('replaceAnchor', function () {
return function(string) {
if (string) {
/* Sudo code would be:
1. find all <a> in string;
2. get the value of the href attribute and assign to variable hrefHolder
3. replace all href attributes with ng-click="(hrefHolder)";
4. return replaced content; */
} else {
return '';
}
}
})
ng-click="aFunction('original href value in here')";
JQuery is loaded in full (as opposed AngularJS jQLite) so happy if this is JQuery based. Iv tried combinations of $.each, $.find and $.replacewith with no joy so far.

Answer 1

Okay, there's A LOT of work to something like this. Simply replacing the href with "ng-click" will not actually make the "ng-click" magically work. ng-bind-html simply includes the raw html and does not compile it. Using our filter, we can make angular compile the html as well, making it work as expected.
First, here's a working plunkr.
Here's the code:
HTML:
<p ng-bind-html="someScopedVariable | replaceAnchor:'sampleFunction':this"></p>
We're passing some extra variables to the filter. The first one 'sampleFunction' will be the name of the scope function you want to call with the anchors. The second function is the scope you want to compile the html with. this refers to the current scope.
JS:
angular.module('imApp', [])
.config(function($sceProvider) {
$sceProvider.enabled(false);
})
.run(function($rootScope) {
$rootScope.someScopedVariable = 'Google';
$rootScope.sampleFunction = function(href) {
event && event.preventDefault && event.preventDefault();
alert(href);
};
})
.filter('replaceAnchor', function ($rootScope, $compile) {
return function(str, fn, scope) {
scope = scope || $rootScope;
if (str && fn) {
// Create a temporary container that we can use to search for anchor tags
var tempContainer = $('<div/>');
tempContainer.html(str);
// 1. find all <a> in string.
var anchorTags = tempContainer.find('a');
anchorTags.each(function() {
// 2. get the value of the href attribute and assign to variable hrefHolder
var hrefHolder = $(this).attr('href');
// 3. replace all href attributes with ng-click="(hrefHolder)";
$(this).attr('ng-click', fn + '(\'' + hrefHolder + '\')');
});
// 4. return replaced content
return $compile(tempContainer.html())($rootScope);
} else {
return str;
}
}
});
There's some boilerplate there, but I'm leaving it in because it's crucial to understanding what's happening. Let's look at the filter...
Our filter function that we're returning takes three arguments: the original html, the function name, and the scope. If the scope isn't passed, $rootScope will be used. First I create a temporary container to keep things clean and so that we only have one root element. Then I append the passed in original html to that temp container. Then we can use jQuery just like we normally would to loop through all anchor tags, grab their href, and create a new ng-click attribute that calls the function name we passed in with the href as it's only argument. Lastly, we return the new html that has been compiled to make the ng-clicks actually work.
You could always hardcode the function name into the filter, but I like to keep things reuseable.