angularjs - How to output HTML unicode characters from an expression

Question

I am triying to output simples html unicode characters, for example ♣ 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 = '♣';

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

1. The html code is not injected into the span balise
2. 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.

Answer 1

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

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

Fiddle: http://jsfiddle.net/TheSharpieOne/uPw2U/

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>

Fiddle: http://jsfiddle.net/TheSharpieOne/uPw2U/1/