I decided to create a custom directive that would compile HTML and bind it to my element.
Here is the code for my directive:
export class BindCompileHtmlDirective implements ng.IDirective {
restrict = 'A';
link = (scope: ng.IScope, element: any, attrs: any, ctrl: any) => {
scope.$watch((scope) => {
console.log(attrs);
//Tried accessing the attributes with different approaches but ended up getting undefined
return scope.$eval(attrs.bindCompileHtml);
}, (value) => {
console.log(value);
element.html(value && value.toString());
var $phe = this.$compile(element.contents())(scope);
});
}
constructor(private $compile: any) {
}
static factory(): ng.IDirectiveFactory {
const directive = ($compile: any) => new BindCompileHtmlDirective($compile);
directive.$inject = ['$compile'];
return directive;
}
}
angular.module('rundeckManager.directives')
.directive('bindCompileHtml', BindCompileHtmlDirective.factory());
And here is how I implemented it:
<span id="id-of-span" bind-compile-html="{{TabsDomains.domainsLabelHtml}}"></span>
The attributes object seems to be correct and contains the necessary string for compilation. Here is the log of the attribute object :
However, when using my directive, it returns 0 instead of the compiled string and I am struggling to figure out why.
If anyone could provide some insight or help on this issue, it would be greatly appreciated.