Passing a string containing HTML tags to a directive, tags not rendered

Question

I'm passing a string to my angular directive. The problem here is that the string I'm passing contains some html, and obviously this is rendered as text in the directive output.

I've been reading a lot, but all the solutions I can find (and also on Angular's docs) rely on using ng-bind-html directive.

What confuses me is how to use in case of having a custom directive.

For example, my custom directive looks like this:

uxctModule.directive('toolTip', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      scope:{
         message: "@"
      },

      template: '<span class="infobox_container"> '+
                     '<span class="infobox_icon"></span> '+
                        '<span class="infobox">{{message}}</span> '+
                '</span>'   
    }
  }
);

...and in my markup, I'm inserting it like this:

<div tool-tip message = "{{toolTip1Label}}"> </div>

where toolTip1Label is a variable coming from the controller, containing some tags, and it's passed to the directive.

I'm really confused about how properly use ng-bind-html in this type of setup (or maybe that is not the solution to my problem). I have also looked if there's a way to user some built in filters to explicitly render the html, but it doesn't seem to exist.

Thank for your help, hope this is question makes sense, I'm very new to angular but thanks to your help I'm improving day by day :)

Answer 1

ng-bind-html is what you need. Just include ngSanitize in your module dependencies and add angular-sanitize.js. In your directive you can bind the HTML contained in your scope variable using ng-bind-html:

app.directive('toolTip', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      scope:{
         message: "@"
      },
      template: '<p ng-bind-html="message"></p>'   
    }
  }
);

Plunker