Replacing static text content inside ngrepeat with ngclick directive in AngularJS - angularjs

Question

I've tried so many different things here with no luck. Basically i have an array of strings (just sentences). I need to ngRepeat over those and output them. No problem. But I need to be able to do a find and replace for a particular word combination ("social security" in this case), wrap it inside a link and add an ngClick directive to that link.
I'm pretty certain that i need to use a directive and this has something to do with compiling and linking. But Thats about as far as i can get with this. Any help would be most appreciated.

Answer 1

I think you could use something like this : http://jsfiddle.net/DotDotDot/Z9CHL/2/
I'm not sure it's the best implementation, but at least it works
The HTML code is quite simple, I send the custom directive one parameter, the full sentence
<ul ng-repeat='sentence in list'>
<li><span the-dir txt="sentence"></span></li>
</ul>
On the javascript side, it's quite easy but longer :
.directive('theDir', function($compile){
var r=/(social security)/ig;
return {
scope:{txt:'='},
link:function(scope,element,attributes){
scope.aFunction=function(){
console.log('In the directive, you clicked on social security');
}
if(r.test(scope.txt)) {
splitted=scope.txt.split(r);
console.log(splitted)
var newSpan=new angular.element('<span>');
for(var i=0;i<splitted.length;i++)
{
if(r.test(splitted[i])){
var newLink=new angular.element('<a>');
newLink.attr('ng-click','aFunction()');
newLink.addClass('social-security');
newLink.html(splitted[i]);
newSpan.append(newLink);
}
else
newSpan.append(splitted[i]);
}
element.append(newSpan);
$compile(newSpan)(scope);
}
else
{
element.html(scope.txt);
}
}
}
});
I use a Regular Expression to find all occurrences of your sentence 'social security', split the full sentence on these occurences, then replace each time the words by a new angular.element (an HTML link in this case, with a ng-click attribute). I append all the regular words and the links to the original element, and then $compile the newly created span with the working links in order to have a working ng-click.
And it seems to work
I let you dig in the code, and I hope it helps you
Have fun