Javascript 角度转换HTML标记

我知道以前这里有人问过这个问题，但没有一个答案对我的情况有效

我买了这个主题，它使用Angular 1.4.2和Angular translate 2.6.0（甚至更新到最新的2.7.2）

默认情况下，模板上有Translate模块

这是配置文件

  $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": {
    .
    .
    .
    .
  },

但是我不能在JSON文件的文本中添加HTML标记，而不是

欢迎使用我的应用程序

我要走了

欢迎来到

我的应用程序

您有一个

，它违反了您所说的您不想要的规定，因此请按如下方式删除它：

{
   "page": {
    "PAGES_WELCOME" : "Welcome to {{appName}}"
  },

  "login": {
    .
    .
    .
    .
  },

 <div [innerHTML]="'page.PAGES_WELCOME' | translate"></div>

---

Angular在其插值期间清理任何html字符串。 为了避免这种情况，您需要在注入之前在$sce中将HTML标记为安全的。然后还使用ngBindHtml输出html

我以前没有使用过角度平移，但这可能有用：

//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>

//应用程序是主模块
app.filter（“htmlSafe”，['$sce'，函数（$sce）{
返回函数（htmlCode）{
返回$sce.trustAsHtml（htmlCode）；
};
}]);
//然后输出它

使用AngularJS 1.4.7进行测试，我只使用以下内容：

<span data-ng-bind-html="'my.i18n.code.to.translate.html.tags' | translate"></span>

---

因为我不想注入任何过滤器，但上面的内容只是在我自己的受信任的i18n字符串上工作。当然，被接受的答案会更安全，但这一个只是立即工作。

安装ngSanitize模块

它使您能够绑定html内容，然后按如下方式更改代码：

ng-bind-html="'a_key_with_html' | translate"

---

实际上，我真的不想在html模板中使用标记。这些标签没有意义

我终于成功了。环境：角度1.5.8，角度传输速率：2.11.0

我的解决办法是： 1.加载ngSanitize并初始化模块

$translateProvider.useSanitizeValueStrategy（'sanitize'）

---

您可以保持

JSON

文件的原样，然后简单地使用

HTML

中的

innerHTML

属性来呈现文本，如下所示：

{
   "page": {
    "PAGES_WELCOME" : "Welcome to {{appName}}"
  },

  "login": {
    .
    .
    .
    .
  },

 <div [innerHTML]="'page.PAGES_WELCOME' | translate"></div>

这不是我想要的，我希望行中断，但angular正在行内打印
。@DannyG-是的，您现在没有问，因为您刚刚更改了问题：）您必须显示PAGES\u WELCOME变量的调用位置，以便我们能够知道。我没有更改问题，
标签被编辑器解释并添加了换行符，我只是想显示输出，PAGES\u WELCOME是不相关的，只是出于示例目的。它可能是一个没有变量的字符串，但HTML标记仍然会打印在页面上screen@DannyG-如何显示字符串以解释为什么不允许使用
，这是完全相关的。我的预感是，您添加的清理是从字符串中剥离任何可以更改以防止恶意插入的代码，但这是一种预感-我可以肯定地告诉您是否显示了必要的代码。起初，清理服务不是（我是在阅读文档后添加的）它在那里也不起作用。你能提供你绑定这些内容的html吗？当然，我使用的是Jade和gulp编译的html。我怀疑你可能想使用类似

ng bind html

的东西，它位于

angular sanitize

包中。我试图理解这个问题的意图。你能检查一下我们的车，看看这是不是你想做的事吗？（）这与我不确定在普朗克上看到什么有关，但这还不够公平；谢谢你的澄清。（如果默认情况下没有启动，您只需点击start即可）有另一个功能使其HTML安全，但是

ng bind HTML

成功了，谢谢！只有

ngbindhtml

（没有

htmlSafe

filter）才帮了我的忙！谢谢这对我有用。我认为这是最近（在编写本文时）绑定到innerHTML并绕过Angular的模板默认提供的HTML转义的方法。