I am having trouble getting transcluded content to render properly in my custom directives.
Here are examples:
http://plnkr.co/edit/mvx5GuMrPcUPJbrOCKbD
The content coming from the external source has newline (\n
) characters, and I want to use a filter to replace the newlines with <br>
HTML tags.
app.filter('newline2br_trust', ['$sce',
function($sce) {
return function(input) {
return input ? $sce.trustAsHtml(input.replace(/\n/g, '\n<br/>')) : '';
};
}
]);
This seems to work correctly if I use ng-bind-html on a single element, but if I have a custom directive with transcluded contents, it seems to ignore the $sce.trustAsHtml(), and escapes the HTML content:
<multiline>{{ example.data1 | newline2br_trust }}</multiline>
How can I get my directive to properly transclude this HTML content?
NOTE: It seems to be something with the $sce functionality with AngularJS expressions + ngTransclude, as raw/static HTML content works properly with transclude:
<multiline>BrLine1<br/>BrLine2<br/>BrLine3</multiline>
` tags work if the raw HTML is transcluded, but not if the HTML comes from an expression, even if that expression ends with a filter that outputs `$sce.trustAsHtml` content. – thaMANSTA Nov 02 '15 at 21:52