angularjs - Angular: add ng-click inside directive -

in directive using appendto , ng-click inside it:

$("<div>" + "<a href='' ng-click='addit()' + user + "</a></div>").appendto '.user-class' 

and ng-click doesn't work. should use $compile? how use in case?

this code part of directive make dropdown menu json. there no option move directive template, need find solution how make 'ng-click' works here.

like matthew, curious part(s) cannot moved out external template / internal template function. doesn't make sense me have re $compile directive only add ng-click handler.

the senseful way add ng-click directive template. either external one, or function returning string value in directive definition object.

running $compile after link step has finished not idea performance wise, seeing how recompiles entire dom element directive attached to. avoid doing long possibly can.

.directive('mydir', function () {   return {     template: function (/*element, attrs*/) {       return '<div><a href="" ng-click="addit(user)">{{::user}}</a></div>';     },     link: function (scope, el, attrs) {       scope.user = 'john';     }   }; }); 

---

this result in following dom structure:

<div>   <a href="" ng-click="addit(user)">john</a> </div> 

jsbin