Directive to wrap html element in hyperlink - angularjs

Question

I'd like to write own directive which can wrap any html element in hyperlink using the passed parameter, so for example:
<button myDirective="parameter">...</button>
will have following effect
<button>...</button>
I'm beginner in AngularJS. Unfortunately I didn't find any helpful tutorial for making this in typescript.
I created sth like that:
export default class LinksHelperDirective implements ng.IDirective {
public static Name = "kb-link";
public restrict = "A";
public urlTemplate = "";
constructor(private readonly $parse: ng.IParseService) {
}
public static Factory() : any {
const directive = ($parse: ng.IParseService) => {
return new LinksHelperDirective($parse);
};
directive["$inject"] = ["$parse"];
return directive;
}
link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes,
ngModel: ng.INgModelController) => {
const linkId = this.$parse(attrs["kb-link"])(scope);
const wrapper = angular.element('');
element.wrap(wrapper);
};
}
But unfortunately it doesn't work... even constructor is not called. I registered directive in index file like below:
module.directive(LinksHelperDirective.Name, LinksHelperDirective.Factory(), ["$parse"]);
and in html file:
<button kb-link="1234">Help</button>
Anybody knows what's wrong with that?

Answer 1

You need to use ng-transclude directive for that
class WrapDirective {
restrict = 'E';
transclude = true;
scope = { someLink: '<' };
template: '<a ng-href="url/{{ someLink }}"><ng-transclude></ng-transclude></a>';
}
But you need to wrap your element like <wrap-directive some-link="$ctrl.link"><button>...</wrap-directive>