如何使用Angular-Translate处理包含HTML的字符串？

Question

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

有没有办法实现它？

这是我的傻瓜:http://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H？p = preview

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

注意:我不想让控制器来处理它.

Answer 1

这些天你可以使用angular-translate 2.0开箱即用.

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

为我创造奇迹.

Answer 2

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

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

包含ngSanitize后,以下代码应该起作用:

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

Answer 3

这对我有用...... HTML被解释为漂亮的样式(例如粗体,斜体等)

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

但是,我还需要确保我没有在提供程序设置中使用转义策略.那让我搞砸了一会儿.

• 作品: $translateProvider.useSanitizeValueStrategy( 'sanitize' );
• 不: $translateProvider.useSanitizeValueStrategy( 'escape' );

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

使用:angular-translate v2.13.1

Answer 4

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

Answer 5

我找到了解决方案.我正在使用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>

事情开始奏效了.