javascript - AngularJS directive to replace text with ng-click in it -

i trying create directive in angular takes set of properties manipulates text , outputs element.

the problem i'm having want have of text wrapped in ng-click call function scope in end open dialog box.

i have created simple example here once working let me expand on it: http://jsfiddle.net/beuve/

app.directive('parsestring', function() {   return {     restrict: 'a',     scope: { props: '=parsestring' },     link: function compile(scope, element, attrs) {        var namehtml = '<a href="#" ng-click="helloperson('+scope.props.name+')">'           +scope.props.name+'</a>';       var html = scope.props.text.replace('world', namehtml);       element.html(html);     }   }  }); 

take @ fork of fiddle: http://jsfiddle.net/joakimbeng/avjtv/1/ make work need use $compile provider. example isn't clean, hope point :)

add $compile dependency , compile changed html:

app.directive('parseurl', function($compile) {     ...     link: function compile(scope, element, attrs, controller) {         angular.foreach(value.match(urlpattern), function(url) {             value = value.replace(url, "<a target=\"" + scope.props.target + "\" ng-click='onclick()'>" + url +"</a>");         });         // wrapping of content in div required because         // angular wants 1 element @ root level         var content = angular.element('<div></div>').html(value).contents();         var compiled = $compile(content);         element.html(''); // clearing old text         element.append(content); // using append because "content" domelements now, instead of string         scope.onclick= function () {             console.log('clicked');         };         compiled(scope); // linking compiled elements scope      ...