Using html in alerts

[lancegliser]

Hello!

First, I'd like to thank you for your work. Then gripe or contribute, whichever you deem this. Maybe I just didn't know the proper way to do this it.

I’m attempting to set an error with a bit of html in (simple
). That goes to the module defined directive of {{alert.msg}}. The alert directive transcludes into another template. Any html I output into that stays html. I’ve tried ng-bind-html on the directive itself: . That works for outputting html correctly, but it destroys the transcluded content additions. I tried doing something like {{$sce.trustAsHtml(testHtml)}}, but that isn’t even evaluated. Comes out as a literal string. Perhaps the template needs to be hit by $compile again to do that?

But, in the mean time modified the directive and template instead: By placing the message into the scope via attribute, the interior transclude can be replaced with ng-bind-html.

.directive('alert', function () {
  return {
    restrict:'EA',
    controller:'AlertController',
    templateUrl:'template/alert/alert.html',
    transclude:true,
    replace:true,
    scope: {
      type: '=',
      msg: '=',
      close: '&'
    }
  };
});

angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/alert/alert.html",
    "<div class='alert-box' ng-class='(type || \"\")'>\n" +
    " <div ng-bind-html='msg'></div>\n" +
    "  <a ng-show='closeable' class='close' ng-click='close()'>&times;</a>\n" +
    "</div>\n" +
    "");
}]);

What would be a more proper solution to this issue, without changing the library itself?

[circlingthesun]

Hey. To get around escaping I create a filter as follows:

angular.module('unsafe-filter', [])
.filter('unsafe', function($sce) {
  return function(input) {
    return $sce.trustAsHtml(input);
  };
});

This allows me to write:

<div ng-bind-html='msg|unsafe'></div>

I hope this helps.