Directive 'recompilation' into another - angularjs

Question

I'm wondering if there is an easy way to accomplish this kind of attribute directive:
<p my-attr-directive="ABC">go to ABC</p>
should be recompiled in a ui-router parameterized link:
<p ui-sref="param_state({id:'ABC'})">go to ABC</p>
The state param_state is fixed, the new directive should defines the parameter id.
EDIT: I almost done, I'm not sure why $compile, doesn't compile
LINK!!
app.directive('myAttrDirective', function($compile) {
return {
restrict: 'A',
link: function($scope, el, $attrs) {
$attrs.$set("uiSref","param_state({id:'"+$attrs.myAttrDirective+"'})");
$compile(el.contents())($scope);
}
};
});

Answer 1

I almost done, I'm not sure why $compile, doesn't compile
If you inspected the anchor element, you'd see something like the following in it,
<span class="ng-scope">LINK!</span>
which means $compile has done its job. In this regard, just binding the contents of the element (i.e. the textNode 'LINK!') to the $scope.
Therefore, $compile is compiling, but it hasn't found your dynamically added directive uiSref anywhere searching.
$compile(el.contents())($scope); // <== your directive exists as an attribute of `el` itself
Solution
Try to compile the host element itself since you add the uiSref directive there as an attribute. Also, its important to remove the my-attr-directive attribute from the element or else you'll end up infinitely compiling the anchor element:
link: function($scope, el, $attrs) {
// make sure you don't recursively compile
el.removeAttr('my-attr-directive');
$attrs.$set("uiSref","param_state({id:'"+$attrs.myAttrDirective+"'})");
$compile(el)($scope); // <== here
}
Working Demo