javascript - Angular 翻译 HTML 标签

Question

我知道之前有人在这里问过这个问题，但似乎没有一个答案适合我的情况

我买了这个主题Angle它与 Angular 1.4.2 和 Angular translate 2.6.0 一起工作(甚至更新到最新的 2.7.2)

模板默认有翻译模块

这是配置文件

  $translateProvider.useStaticFilesLoader({
      prefix : 'app/i18n/',
      suffix : '.json'
  });
  $translateProvider.preferredLanguage('es');
  $translateProvider.useLocalStorage();
  $translateProvider.usePostCompiling(true);
   // Enable escaping of HTML
  $translateProvider.useSanitizeValueStrategy('sanitize'); // I added this line based on Docs wasn't before

以及JSON格式的翻译文件

  {
   "page": {
    "PAGES_WELCOME" : "Welcome to <br> MY APPLICATION, HEY THERE IS A BR TAG BEFORE ME"
  },

  "login": {
    .
    .
    .
    .
  },

但我不能在文本中添加 HTML 标签，在 JSON 文件中，而不是获取

欢迎来到我的应用

我得到了

欢迎使用
我的APP

我该如何解决这个问题？

编辑

我不想删除标签，我的 JSON 文件被后端修改，它可以而且将包含 HTML 标签，我希望这些标签在输出上起作用。

内容绑定(bind)的 JADE 示例

div(class="col-lg-4 col-md-4 col-sm-4 col-xs-12 footer-left")
  p(class="text-center") 
    {{ 'page.PAGES_WELCOME' | translate }} 

Answer 1

Angular 在其插值过程中清理所有 html 字符串。为了解决这个问题，您需要在注入(inject)之前在 $sce 中将 HTML 标记为安全。然后也使用 ngBindHtml 输出 html。

我以前没有使用过 Angular 翻译，但这可能有效:

//app is the main module
app.filter("htmlSafe", ['$sce', function($sce) {
    return function(htmlCode){
        return $sce.trustAsHtml(htmlCode);
    };
}]);

//then to output it
<span data-ng-bind-html="'page.PAGES_WELCOME' | translate | htmlSafe"></span>