How to output HTML unicode characters from an expression

Question

I am triying to output simples html unicode characters, for example &clubs; from an expression.

I have tried to use ng-bind-html and ng-bind-html-unsafe but i can't make it appear in my HTML.

$scope.character = '&clubs;';

<span ng-bind-html="{{character}}"></span>

The html code is not injected into the span balise
The html code is not interpreted (the html character doesn't appear in my console, but if i don't use an expression from a controller and directly call <span ng-bind-html="&clubs;"></span>, i can see the HTML character correctly interpreted in my console, but still not injected into the span balise)

How to output html characters from an expression ?

I import the script //ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-sanitize.min.js and add the ngSanitize dependency in my app.

TheSharpieOne · Accepted Answer · 2014-01-13 18:21:52Z

46

You will have to use $sce (Strict Contextual Escaping), ngHtmlBindUnsafe was removed in 1.2

function myCtrl($scope,$sce){
    $scope.html = $sce.trustAsHtml('&clubs;');
}

Furthernore, you can create a filter so that you will not need to escape everything in the controller.

.filter('html',function($sce){
    return function(input){
        return $sce.trustAsHtml(input);
    }
})

HTML:

<span ng-bind-html="'&clubs;'|html"></span>

answered Jan 13, 2014 at 18:21

TheSharpieOne

25.7k9 gold badges71 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1