Rendering html in Angular with Directive

Question

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?

Answer 1

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

$complie documenation

Answer 2

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.