如何使用角度翻译处理包含 HTML 的字符串
How to handle strings containing HTML using Angular-Translate?
有没有办法告诉角度和角度翻译来处理包含HTML内容的字符串。
我有add_card-title = "To make ordering even quicker, <span class="nowrap">add a card now</span>"
作为我的郎弦。当我通过编写<p>{{'add_card-title' | translate}}</p>
在我的模板中使用它时,我会得到字符串。
输出:To make ordering even quicker, <span class="nowrap">add a card now</span>
预期输出: To make ordering even quicker, add a card now
我知道我可以使用ng-html-bind-unsafe
但这无济于事。
不工作:
<p ng-html-bind-unsafe="{{'add_card-title' | translate}}"></p>
有什么办法可以实现吗?
这是我的笨蛋:http://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H?p=preview
作为参考,您可以看到此问题:https://github.com/PascalPrecht/angular-translate/issues/173
注意:我不想让 Invlove 控制器来处理它。
如今,您可以使用角度平移 2.0 开箱即用。
<p translate="{{ 'PASSED_AS_INTERPOLATION' }}"></p>
为我创造了奇迹。
你必须使用不带大括号的 ng-bind-html 指令 ({{ }})
要了解使用该指令 (ngBindHtml) 所需的配置,请点击以下链接:https://docs.angularjs.org/api/ng/directive/ngBindHtml
包含 ngSanitize 后,以下代码应该可以工作:
<p ng-bind-html="'add_card-title' | translate"></p>
我有用...HTML 被解释为漂亮的样式(例如粗体、斜体等)
<p translate="translationId"></p>
但是,我还需要确保我没有在提供程序设置中使用转义策略。 这让我搞砸了一段时间。
- 作品:
$translateProvider.useSanitizeValueStrategy( 'sanitize' );
- 不:
$translateProvider.useSanitizeValueStrategy( 'escape' );
https://angular-translate.github.io/docs/#/guide/19_security
使用:角度平移 v2.13.1
<p [innerHTML]="'add_card-title' | translate"></p>
我已经找到了解决方案。我正在使用AngularJS v1.2.0-rc.3
它已被弃用ng-html-bind-unsafe
。现在角度已经ng-bind-html
而不是ng-html-bind-unsafe
.但是必须注入角度消毒作为依赖项才能使其工作。
我替换了
<p ng-html-bind-unsafe="{{'add_card-title' | translate}}"></p>
跟
<p ng-bind-html="'{{'add_card-title' | translate}}'"></p>
事情开始运作。
默认情况下,出于安全原因,AngularJS转义和代码显示,您需要告诉角度您不想转义的字符串,在AngularJS 1.2之前的旧时代,开发人员可以使用ng-bind-html-unsafe
但是在AngularJS 1.2中已被弃用。
要在字符串中使用html标签,在AngularJS 1.2+中,您需要下载angular-sanitize
模块并将其包含在应用程序依赖项中。
任何字符串都包含 html 代码,您可以使用 ng-bind-html
自动使用$sanitize 来显示它,在您的情况下,它将ng-bind-html="'add_card-title' | translate"
供参考:
中
AngularJS 文档
这里有许多混合html的方法(以及范围变量,如果你在html翻译中需要ng-click之类的东西,还有解释):
http://plnkr.co/edit/OnR9oA?p=preview
<div>{{'TESTING1_SIMPLE_VAR_REPLACE' | translate: '{name: "John Smith", username: "john.smith12"}'}}</div>
<div translate='TESTING1_SIMPLE_VAR_REPLACE' translate-values='{ name: "Jake Smith", username: "jake-smith-101" }'></div>
<div translate="TESTING1_SIMPLE_VAR_REPLACE_NA" translate-value-name="{{name}}" translate-value-username="{{username}}" translate-default="Hello {{name}} ({{username}})"></div>
<br/><br/>
<div>{{'TESTING1_SIMPLEHTML' | translate}}</div><!-- doesn't compile the html -->
<div translate="TESTING1_SIMPLEHTML" translate-default='DEFAULT(not used since there is a translation): This <b>translation</b> has a <a href="http://google.com" target="_blank">link</a>.'></div><!-- this and below compile the html -->
<div translate="TESTING1_SIMPLEHTML_NA" translate-default="DEFAULT(used since translation not available): This <b>translation</b> has a <a href='http://google.com' target='_blank'>link</a>."></div>
Uses ng-bind-html and sanitize: <div ng-bind-html="'TESTING1_SIMPLEHTML' | translate"></div>
<br/><br/>
<div translate="TESTING2_SCOPE" translate-values="{timer: timer}" translate-default="DEFAULT(not used since there is a translation): Seconds: <a href='http://google.com' target='_blank'>{{timer}} seconds</a>."></div>
<div translate="TESTING2_SCOPE" translate-value-timer="{{timer}}"></div>
<div translate="TESTING2_SCOPE_NA" translate-default="DEFAULT(used since translation not available): Seconds: <a href='http://google.com' target='_blank'>{{timer}} seconds</a>."></div>
<br/><br/>
<div compile-unsafe="'TESTING3_COMPILE' | translate"></div><!-- old way to do before angular 2.0-->
<div translate="TESTING3_COMPILE" translate-compile></div>
<div translate="{{'TESTING3_COMPILE_SCOPE'}}" translate-compile translate-value-name="{{name}}" translate-value-username="{{username}}" ></div> <!-- not sure of advantage of this style, but saw an example of it -->
<div translate="TESTING3_COMPILE_SCOPE" translate-compile translate-value-name="{{name}}" translate-value-username="{{username}}" ></div>
<div translate="TESTING3_COMPILE_SCOPE" translate-compile translate-values='{ name: "Jake Smith", username: "jake-smith-101" }' ></div>
"lng_pageFooter" : "Copyright © • 2018 • My Company • Powered by <a href='"http://www.mycompany.com'">My Company™</a>"
...
$translateProvider.useSanitizeValueStrategy('escape');
....
app.filter('trusted', ['$sce', function($sce) {
var div = document.createElement('div');
return function(text) {
div.innerHTML = text;
return $sce.trustAsHtml(div.textContent);
};
}])
....
<span ng-bind-html="'lng_pageFooter' | translate | trusted"></span>
我尝试了您的两个答案,但没有一个在 1.0.7 上工作,所以对于每个在 1.2 之前工作的人来说,你可以这样做
<p ng-html-bind-unsafe="'add_card_title' | translate"></p>
只需使用 innerHtml。例如<p [innerHtml]="'lorem.ipsum' | translate"></p>
- jQuery包含html-将类添加到头中
- 存储包含html标记的文本
- 是否可以在JavaScript中包含HTML代码
- 创建一个可以包含html标记的文本字段
- 当字符串包含 HTML 标记时,JSON 解析失败
- 包含HTML的变量上的jQuery选择器
- 如何从包含HTML代码和许多UL标签及其ID的JavaScript变量A中获取
- ID
- 将句子大小写应用于可能包含HTML的字符串
- php包含包含html标记和js脚本的文件
- 获取包含HTML标记的选定文本
- 如何将ngOptions与包含HTML实体的字符串一起使用
- AngularJS在指令中包含HTML属性
- 从只包含HTML、CSS&JavaScript
- 如何通过单击按钮包含 html 文件
- 使用 javascript/jquery 遍历包含 HTML 的字符串中的所有标记
- 通过 JavaScript 包含 HTML 文件
- Javascript不是't在包含html模板时执行
- 如何使用角度翻译处理包含 HTML 的字符串
- 在包含 html 的变量中选择一个元素
- PHP 变量包含 HTML 和 JavaScript.通过JavaScript将其注入HTML不起作用