如何从表达式中输出 HTML unicode 字符 [英] How to output HTML unicode characters from an expression

查看:21
本文介绍了如何从表达式中输出 HTML unicode 字符的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试从表达式中输出简单的 html unicode 字符,例如 ♣.

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

我尝试使用 ng-bind-htmlng-bind-html-unsafe 但我无法让它出现在我的 HTML 中.

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. html 代码未注入 span balise
  2. 不解释 html 代码(html 字符不会出现在我的控制台中,但是如果我不使用来自控制器的表达式并直接调用 <span ng-bind-html="&clubs;"></span>,我可以在控制台中看到正确解释的 HTML 字符,但仍然没有注入 span balise)
  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)

如何从表达式中输出html字符?

How to output html characters from an expression ?

我导入脚本 //ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-sanitize.min.js 并添加 ngSanitize我的应用程序中的依赖项.

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.

推荐答案

你将不得不使用 $sce (Strict Contextual转义),ngHtmlBindUnsafe 在 1.2 中被移除

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

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

小提琴: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>

小提琴:http://jsfiddle.net/TheSharpieOne/uPw2U/1/

这篇关于如何从表达式中输出 HTML unicode 字符的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆