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?

Michael Benford · Accepted Answer · 2013-09-12 05:33:01Z

5

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.

answered Sep 12, 2013 at 5:33

Michael Benford

14.1k3 gold badges62 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JQuery Guru · Accepted Answer · 2013-09-12 05:13:36Z

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

answered Sep 12, 2013 at 5:13

JQuery Guru

6,9631 gold badge35 silver badges40 bronze badges

1 Comment

Sneaksta Over a year ago

I managed to make a simple directive that compiles the html value that it is given, and then simply places that content within the element - the compile documentation was very useful in this regard

Collectives™ on Stack Overflow

Rendering html in Angular with Directive

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related