Reputation: 18038
Handlebar's {{expression}}
form HTML-escapes values returned while its {{{expression}}}
form does not. Is there any way to add this feature to AngualarJS templates so that we can use {{expression}}
for regular sanitized output and {{{expression}}}
for trusted, non-escaped HTML expressions?
By the way, I am familiar with ng-bind-html
directive.
Upvotes: 5
Views: 1728
Reputation: 49620
This is really an unnecessary problem, and what follows, is an even more unnecessary solution :) But just for fun, you could do something like the following: parse the HTML and replace all found instances of {{{
and }}}
with ng-bind-html
. I reused the filter approach above to actually do $sce.trustAsHtml
:
app.directive("trust", function($compile){
return {
terminal: true,
priority: 4000,
link: function(scope, elem){
var html = elem.html();
var re = /({{{)([^}]+)(}}})/g;
var newHtml = html.replace(re, '<span ng-bind-html="$2 | trustAsHtml"></span>');
elem.html(newHtml);
elem.removeAttr("trust");
$compile(elem)(scope);
}
};
})
.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });
Usage is:
<div trust>
{{{html()}}}
<div>
{{{foo}}}
</div>
</div>
Upvotes: 0
Reputation: 525
If you really want to use {{{}}}
, it is possible:
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('{{{');
$interpolateProvider.endSymbol('}}}');
});
However it is not possible to do that only for trusted html. All of your delimiters will change.
Upvotes: -1
Reputation: 21662
Answer: The short answer is no. I've never come across such a configuration. You can't get {{{}}} to work in Angular.
Helpful workaround: It is not possible to get unescaped/unsanitized HTML into a view through the scope without using the ng-bind-html directive. You could add either a helper function to your controller or add a filter that might make it a little easier to use ng-bind-html (Plunk here), but you still seem to need ng-bind-html:
var app = angular.module('plunker', ['ngSanitize']);
app.controller('MyController', function($scope, $sce) {
$scope.someHtmlContent = "Label: <input name='test'>";
$scope.h = function(html) {
return $sce.trustAsHtml(html);
};
});
app.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });
Then you would use it like this:
<body ng-controller="MyController">
<div ng-bind-html="someHtmlContent | trustAsHtml">
</div>
<div ng-bind-html="h(someHtmlContent)">
</div>
</body>
Upvotes: 4