Reputation: 1061
I am storing html data in my database from the output of a WYSIWYG editor. The html also stores the html for some directives. One of them being the ui-bootstrap tooltip:
<span tooltip-placement="left" tooltip="On the Left!">Tooltip text here</span>
I am able to get any other html elements to work by using the binding:
<div ng-bind-html-unsafe="html.content"></div>
But the html with the directive's reference doesn't interact with the actual directive.
How can I get the directive to work?
Do I have to compile the html or something like that?
Upvotes: 2
Views: 6142
Reputation: 14114
Yes, since the markup you are trying to render contains directives, you need to compile it so they are processed by Angular.
You could create a directive that does that for you:
app.directive('htmlRender', function($compile) {
return {
restrict: 'E',
scope: { html: '@' },
link: function(scope, element) {
scope.$watch('html', function(value) {
if (!value) return;
var markup = $compile(value)(scope);
element.append(markup);
});
}
};
});
Plunker here.
Upvotes: 5
Reputation: 6963
Do I have to compile the html or something like that?
Yes You need to complile the HTML as Angular will only consider as below as simple html
<div ng-bind-html-unsafe="html.content"></div>
Check below is documentation for $compile
Upvotes: 1