Use HTML in Angular Directive parameter

Question

I'm trying to pass html code to an angular directive as a parameter. Is this possible?

Here's the directive in the html. Inside the directive, the <br><br> comes out in plain text.

<mbs-are-you-sure body-text="'You are exporting to: ' + environmentsPretty + '.<br><br> You will replace all books.'"></mbs-are-you-sure>

And here's the directive:

.directive('mbsAreYouSure', [function() {
    return {
        restrict: 'E',
        scope: {
            bodyText: '='
        },
        templateUrl: 'directive-templates/are-you-sure.html'
    };
}]);

And the template:

<div>{{bodyText}}</div>

Answer 1

You can modify your directive to bind to html and use $sce to "convert" the plain text to html (it's more like a trust issue lol).

Here is a plunkr with a working example: http://plnkr.co/edit/AB95oCiC3yzJTwkeVeUm

.directive('mbsAreYouSure', [
  function() {
    return {
      restrict: 'E',
      scope: {
        bodyText: '='
      },
      template: '<div>Plain Text:<br/> {{bodyText}}</div><br/>Converted: <p ng-bind-html="teste"></p>',
      controller: function($scope, $sce) {

        $scope.$watch('bodyText', function(value) {
          $scope.teste = $sce.trustAsHtml(value);
        })

      }
    };
  }
]);

There may be other ways to do this, perhaps more elegant, but this is the quickest I could do on top of my head.

Hope that helps, thanks.