如何使用角度翻译处理内联 html答案

【问题标题】：How to handle inline html with angular-translate如何使用角度翻译处理内联 html
【发布时间】：2015-02-23 06:59:33
【问题描述】：

假设我想在文本中嵌入一个图标

'Please scan the <span class="icon ion-barcode"></span> on the screen'

如何在不将句子分成两部分的情况下将其添加到带有角度翻译的翻译中？

'{{ 'scan_1' | translate }} 
 <span class="icon icon-barcode"></span> 
 {{ 'scan_2' | translate }}'

....

.config(['$translateProvider', function ($translateProvider) {
  var translations = {
    en : {
      scan_1 : 'Please scan the', 
      scan_2 : 'on the screen', 
    }
  };

  $translateProvider
    .translations('en', translations.en)
    .preferredLanguage('en');
}])

【问题讨论】：

这不是翻译服务支持的场景。为什么不简单地复制包括元素在内的整个文本并为其设置翻译。
翻译被插入为文本，而不是 HTML。如果您将 html 标签放在翻译中，它们将被转义，导致 Please scan the <span class="icon ion-barcode"></span> on the screen。
How to handle strings containing HTML using Angular-Translate? 的可能重复项

标签： angularjs internationalization angular-translate

【解决方案1】：

这可能通过translate 指令：

<ANY translate="{{toBeInterpolated}}"></ANY>

看看here 和here。

【讨论】：