如何使用Angular-Translate处理包含HTML的string?

有没有办法告诉angular度和angular度翻译来处理包含HTML内容的string。

我有add_card-title = "To make ordering even quicker, <span class="nowrap">add a card now</span>"作为我的Langstring。 当我通过编写<p>{{'add_card-title' | translate}}</p> <p>{{'add_card-title' | translate}}</p>我得到string,因为它是。

输出: 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

注意:我不想invlove控制器来处理它。

这些日子你可以使用angular-translate 2.0开箱即用。

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

为我创造奇迹。

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

要了解使用该指令所需的configuration(ngBindHtml),请点击此链接: https ://docs.angularjs.org/api/ng/directive/ngBindHtml

包含ngSanitize后,下面的代码应该工作:

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

我find了解决办法。 我正在使用AngularJS v1.2.0-rc.3 ,它已经得到了ng-html-bind-unsafe弃用。 现在angular有ng-bind-html而不是ng-html-bind-unsafe 。 但是,必须注入angular度消毒作为依赖才能使其工作。

我replace了

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

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

事情开始奏效。

这适用于我… HTML被解释为很好的样式(例如粗体,斜体等)

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

但是,我还需要确保在提供程序设置中不使用转义策略。 这让我困惑了一会儿。

  • Works: $translateProvider.useSanitizeValueStrategy( 'sanitize' );
  • 不要: $translateProvider.useSanitizeValueStrategy( 'escape' );

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

使用:angular-translate v2.13.1

这里有很多混合html的方法(以及范围variables,以及如果你需要在你的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> 

默认情况下,出于安全原因,AngularJS转义和代码显示,您需要告诉AngularJS 1.2开发人员可以通过使用ng-bind-html-unsafe而不是AngularJS 1.2已被弃用。

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

任何string包含HTML代码,你可以通过使用ng-bind-html来显示它自动使用$ sanitize,在你的情况下,它将是ng-bind-html="'add_card-title' | translate"

以供参考:

中等

AngularJS文档

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

我试了两个答案,没有一个在1.0.7上工作,所以对于在1.2以前工作的每个人,你都可以这样做

 <p ng-html-bind-unsafe="'add_card_title' | translate"></p>