Javascript Angular 翻译 HTML 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32080768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Translate HTML tags
提问by Danny22
I know this has been asked here before but none of the answers seem to work for my case
我知道以前有人问过这个问题，但似乎没有一个答案适用于我的情况
I bought this theme Anglewhich is working with Angular 1.4.2 and Angular translate 2.6.0 (even updated to last 2.7.2)
我购买了这个主题Angle，它适用于 Angular 1.4.2 和 Angular translate 2.6.0（甚至更新到最新的 2.7.2）
The template by default has the Translate module on it
默认情况下，模板上有翻译模块
This is the config file
这是配置文件
$translateProvider.useStaticFilesLoader({
prefix : 'app/i18n/',
suffix : '.json'
});
$translateProvider.preferredLanguage('es');
$translateProvider.useLocalStorage();
$translateProvider.usePostCompiling(true);
// Enable escaping of HTML
$translateProvider.useSanitizeValueStrategy('sanitize'); // I added this line based on Docs wasn't before
And the translation files in JSON format
以及 JSON 格式的翻译文件
{
"page": {
"PAGES_WELCOME" : "Welcome to <br> MY APPLICATION, HEY THERE IS A BR TAG BEFORE ME"
},
"login": {
.
.
.
.
},
But i cannot add HTML tags inside the text, on the JSON file, instead of getting
但我无法在文本中添加 HTML 标签，在 JSON 文件上，而不是获取
Welcome to MY APP
欢迎使用我的应用程序
I'm getting
我越来越
Welcome to < br > MY APP
欢迎使用<br>我的APP
How can i fix this?
我怎样才能解决这个问题？
EDIT
编辑
I do NOT want to remove the tags, my JSON file is modified by the backend, and it can and will contain HTML Tags, i want those tags to work on the output.
我不想删除标签，我的 JSON 文件由后端修改，它可以并且将包含 HTML 标签，我希望这些标签在输出上工作。
JADE Example Where the content is binding
JADE 示例 内容绑定的地方
div(class="col-lg-4 col-md-4 col-sm-4 col-xs-12 footer-left")
p(class="text-center")
{{ 'page.PAGES_WELCOME' | translate }}
回答by LessQuesar
Angular sanitizes any html strings during its interpolation. In order to get around this you will need to mark the HTML as safe in $sce before injecting. Then also use ngBindHtml to output the html.
Angular 在其插值期间清理任何 html 字符串。为了解决这个问题，您需要在注入之前在 $sce 中将 HTML 标记为安全。然后也使用 ngBindHtml 输出 html。
I've not used angular-translate before, but this may work:
我以前没有使用过 angular-translate，但这可能有效：
//app is the main module
app.filter("htmlSafe", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
};
}]);
//then to output it
<span data-ng-bind-html="'page.PAGES_WELCOME' | translate | htmlSafe"></span>
回答by AElMehdi
You can keep your JSONfile as it is, and then simply use the innerHTMLattribute in the HTMLto render your text like so:
您可以保持JSON文件原样，然后只需使用中的innerHTML属性HTML来呈现您的文本，如下所示：
<div [innerHTML]="'page.PAGES_WELCOME' | translate"></div>
回答by Osify
Tested with AngularJS 1.4.7, I just use this:
用 AngularJS 1.4.7 测试，我只是用这个：
<span data-ng-bind-html="'my.i18n.code.to.translate.html.tags' | translate"></span>
Since I do not want to inject any filter but above is just worked on my own trusted i18n string. Of course, the accepted answer would be more safe but this one is just work right away.
因为我不想注入任何过滤器，但上面只是在我自己信任的 i18n 字符串上工作。当然，接受的答案会更安全，但这只是立即起作用。
回答by Serdar De?irmenci
Install ngSanitize module.
安装 ngSanitize 模块。
It makes you able to bind html content, then change your code like this:
它使您能够绑定 html 内容，然后像这样更改代码：
ng-bind-html="'a_key_with_html' | translate"
回答by Bing Wu
I actually really don't want to use the tags in my html template. The tags isn't meaningful.
我实际上真的不想在我的 html 模板中使用标签。标签没有意义。
I finally got it to work. Environment: Angular 1.5.8, angular-tranlsate: 2.11.0
我终于让它工作了。环境：Angular 1.5.8，angular-translate：2.11.0
My solution is: 1. load ngSanitize and init the module
我的解决方案是： 1. 加载 ngSanitize 并初始化模块
$translateProvider.useSanitizeValueStrategy('sanitize');<p ng-bind-html="'Please <strong>refresh</strong> the browser' | translate"></p>
$translateProvider.useSanitizeValueStrategy('sanitize');<p ng-bind-html="'Please <strong>refresh</strong> the browser' | translate"></p>
回答by IfTrue
But i cannot add HTML tags inside the text, on the JSON file, instead of getting
Welcome to MY APP
I'm getting
Welcome to
MY APP
但我无法在文本中添加 HTML 标签，在 JSON 文件上，而不是获取
欢迎使用我的应用程序
我越来越
欢迎来到
我的应用程序
You have a <br>which is breaking the line like you said you do not want so remove it like so:
你有一个<br>像你说你不想要的那样打破了界限，所以像这样删除它：
{
"page": {
"PAGES_WELCOME" : "Welcome to {{appName}}"
},
"login": {
.
.
.
.
},
