59

有没有办法告诉 angular 和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>

有没有办法实现它？

这是我的 plunker：http ://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H?p=preview

作为参考，您可以看到这个问题：https ://github.com/PascalPrecht/angular-translate/issues/173

注意：我不想让控制器来处理它。

4

10 回答 10

61

这些天 ，您可以使用angular-translate 2.0开箱即用地做到这一点。

<p translate="{{ 'PASSED_AS_INTERPOLATION' }}"></p>

为我创造奇迹。

于 2014-03-03T23:22:00.233 回答
21

您必须使用不带花括号 ({{ }}) 的 ng-bind-html 指令

要了解使用该指令 (ngBindHtml) 所需的配置，请点击以下链接：https ://docs.angularjs.org/api/ng/directive/ngBindHtml

包含 ngSanitize 后，以下代码应该可以工作：

<p ng-bind-html="'add_card-title' | translate"></p>
于 2014-10-17T22:53:45.967 回答
17

这对我有用... HTML 被解释为漂亮的样式（例如粗体、斜体等）

<p translate="translationId"></p>

但是，我还需要确保我没有在提供程序设置中使用逃生策略。这让我一时糊涂。

  • 作品： $translateProvider.useSanitizeValueStrategy( 'sanitize' );
  • 没有： $translateProvider.useSanitizeValueStrategy( 'escape' );

https://angular-translate.github.io/docs/#/guide/19_security

使用：角度翻译 v2.13.1

于 2017-03-16T01:57:08.397 回答
10

您可以使用<p [innerHTML]="'add_card-title' | translate"></p>

于 2017-10-11T16:59:17.217 回答
7

我找到了解决方案。我正在使用AngularJS v1.2.0-rc.3已被ng-html-bind-unsafe弃用的。现在 angular 有ng-bind-html而不是ng-html-bind-unsafe. 但是必须注入angular-sanitize作为依赖项才能使其正常工作。

我换了

<p ng-html-bind-unsafe="{{'add_card-title' | translate}}"></p>

和

<p ng-bind-html="'{{'add_card-title' | translate}}'"></p>

事情开始起作用了。

于 2013-11-03T16:16:57.207 回答
2

出于安全原因，默认情况下 AngularJS 转义和代码显示，您需要告诉 Angular 您不想转义的字符串，在旧时代之前 AngularJS 1.2 开发人员可以通过使用ng-bind-html-unsafe但在 AngularJS 1.2 中已弃用。

要在字符串中使用 html 标签，在 AngularJS 1.2+ 中，您需要下载angular-sanitize模块并将其包含在您的应用程序依赖项中。

任何字符串都包含 html 代码，您可以使用ng-bind-htmlAutomatically uses $sanitize 来显示它，在您的情况下，它将是ng-bind-html="'add_card-title' | translate"

以供参考：

中等

AngularJS 文档

于 2014-12-18T09:42:30.757 回答
2

这里有很多混合 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>
于 2016-10-05T21:53:46.383 回答
2 
"lng_pageFooter" : "Copyright © • 2018 • My Company • Powered by <a href=\"http://www.mycompany.com\">My Company™&lt;/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>
于 2018-02-23T12:17:16.910 回答
0

我尝试了你的两个答案，但没有一个适用于 1.0.7，所以对于在 1.2 之前工作的每个人，你都可以这样做

<p ng-html-bind-unsafe="'add_card_title' | translate"></p>
于 2014-01-13T14:32:30.790 回答
0

只需使用innerHtml。例如<p [innerHtml]="'lorem.ipsum' | translate"></p>

于 2020-11-11T22:30:20.703 回答