AngularJS directive in ng-bind-html

Question

In the application I am working on, a service supplies the app with a json, containing HTML. I output the HTML in a template like this:

<div ng-bind-html="renderHtml(widget.article.body)"></div>

This HTML may contain custom directives, like an inline-chart:

directiveModule.directive('inlineChart', function(){
    return {
        restrict: 'A',
        scope: { inline-widget:'=elem' },
        template: '<p ng-bind="inline-widget.blah"></p>'
    };
});

If I use the directive normally in a template, everything works fine, but it seems it is not being touched when used in ng-bing-html with the renderHtml function.

Any suggestions how this could be realised are very much appreciated!

Answer 1

See https://stackoverflow.com/a/31880192/1345244

Add this directive angular-bind-html-compile

.directive('bindHtmlCompile', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.$watch(function () {
        return scope.$eval(attrs.bindHtmlCompile);
      }, function (value) {
        // Incase value is a TrustedValueHolderType, sometimes it
        // needs to be explicitly called into a string in order to
        // get the HTML string.
        element.html(value && value.toString());
        // If scope is provided use it, otherwise use parent scope
        var compileScope = scope;
        if (attrs.bindHtmlScope) {
          compileScope = scope.$eval(attrs.bindHtmlScope);
        }
        $compile(element.contents())(compileScope);
      });
    }
  };
}]);

Use it like this :

<div bind-html-compile="data.content"></div>

Really easy :)

Answer 2

You need to import the ngSanitize module and use the $sce service. It should look something like this:

// Remember the following comes from angular-sanitize.js found on the angular website and
// also must be included in the web app.
angular.module('myApp', ['ngSanitize']);
angular.module('myApp')
  .controller('MyCtrl', function($scope, $sce) {
    //... other controller code
    $scope.renderHtml = function(html) {
      return $sce.trustAsHtml(html);
    };
  });

In short, the $sce service will mark the html as trusted. You can find documentation here

EDIT: I realize I may have not answered the question. It seems that you're asking about binding scope variables to the directive that is rendered within your directive? In order to get elements to compile properly, you're going to have to use the $compile service and change your logic up a bit. First, the template:

<p class="place-directive-here"></p>

Then the directive:

angular.module('myApp')
  .directive('myDirective', function($compile) {
    return {
      scope: {
        inlineWidget: '='
      },
      template: '<p class="place-directive-here"></p>',
      link: function(scope, elem, attrs) {
        var placement = elem.find('.place-directive-here');
        scope.$watch('inlineWidget', function(widget){
          if(!widget){
            return;
          }
          // Compile the html against the scope. This will bind the dom to your
          // current scope
          var newElement = $compile(widget.blah)(scope);
          // Place in the view
          placement.html(newElement);
        });
      }
    };
  });

You can find the compile documentation here. Hopefully this is a more comprehensive answer to what you're looking for.

EDIT 2: For clarification, the directive should look like this on the page:

<div my-directive inline-widget="someInlineWidget"></div>

The place-directive-here class is just a handle for the directive to find your <p> tag and render inside of it. However, if angular is not concerned with the html that is rendered inside of my-directive, the first solution that I provided should work just fine and the template property of my-directive should be:

template: '<p ng-bind-html="renderHtml(inlineWidget.blah)"></p>'

Answer 3

An example of Angular directive having attributes with HTML tags

View working example over Plunker

This example shows how to create md-card within directive by passing title and content and content having anchor tag <a>

Use $sce.trustAsHtml within link as $sce works when it is bound to scope

HTML

<div ng-app="myApp">
    <my-app-card title="Card Title" content="Card Content with anchor <a href='http://www.google.com' target='_blank'> Google </a>"></my-app-card>
</div>

JS

var app = angular.module("myApp",['ngMaterial'])
    .directive ('myAppCard', ['$sce', function($sce){
        return {
            scope:{ title:"@title", content:"@content"},
            link : function(scope, element, attr) {
                var hcont = $sce.trustAsHtml(attr.content);
                var html = "<md-card><md-card-content><h2>"+ attr.title + "</h2><p>"+ hcont +"</p></md-card-content></md-card>";
                scope.$watch('myAppCard', function() {
                      element.append(html);
                    }
                )
            }
        }
}]);