Javascript 如何使用角度转换处理包含HTML的字符串？

有没有一种方法可以告诉angular并处理包含HTML内容的字符串

我有

add_card-title=“要使订购更快，请立即添加一张卡片”

作为我的语言字符串。当我在模板中通过编写

{{'add_card-title'| translate}}

来使用它时，我得到的字符串是原样的

输出：

要使订购更快，请立即添加一张卡

预期输出：

要使订购更快，请立即添加一张卡

---

我知道我可以使用

nghtml绑定不安全

，但它没有帮助

不工作：

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

有什么办法可以实现吗

这是我的宝物：

有关参考信息，请参见本期：

注意：我不想让控制器来处理它。

我已经找到了解决方案。

---

我使用的是

angularjsv1.2.0-rc.3

，它已被

nghtml绑定不安全

弃用。现在angular使用了

ng bind html

，而不是

ng html bind unsafe

。但必须将其作为依赖项注入才能使其工作

我换了

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

与

---

一切都开始起作用了。

我尝试了你的两个答案，但都没有一个适用于1.0.7，所以对于所有在1.2之前工作的人，你可以这样做

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

在这些日子里，你可以开箱即用

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

---

这对我来说是个奇迹。

您必须使用不带大括号（{{}}）的ng bind html指令

要了解使用该指令（ngBindHtml）所需的配置，请点击以下链接：

包含ngSanitize后，以下代码应能正常工作：

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

默认情况下，AngularJS escape及其显示的代码出于安全原因，在AngularJS 1.2开发人员可以使用

ng bind html unsafe

之前，您需要告知AngularJS 1.2中不希望转义的字符串的角度，但在AngularJS 1.2中，它已经被弃用

要在字符串中使用html标记，在AngularJS 1.2+中，您需要下载

angular sanitize

模块，并将其包含在应用程序依赖项中

任何字符串都包含html代码，您可以使用

ng bind html

自动使用$sanitize来显示它，在您的情况下，它将是

ng bind html=“'add_card-title'| translate”

供参考：

---

这里有许多混合html的方法（以及范围变量，如果您需要在html翻译中单击ng之类的内容，还可以进行解释）：

{{'TESTING1_SIMPLE_VAR_REPLACE'{124; translate:{name:“John Smith”，username:“John.smith12”}}



{{'TESTING1_SIMPLEHTML'| translate}
使用ng绑定html和清理：

这对我很有用。。。HTML被解释为漂亮的样式（例如粗体、斜体等）

然而，我还需要确保我没有在提供者设置中使用转义策略。那把我搞砸了一段时间

---

• 有效：

  $translateProvider.useSanitizeValueStrategy（'sanitize'）

---

• 否：

  $translateProvider.useSanitizeValueStrategy（'escape'）

---

使用：angular translate v2.13.1

您可以使用

"lng_pageFooter" : "Copyright © • 2018 • My Company • Powered by <a href=\"http://www.mycompany.com\">My Company™</a>"
...
$translateProvider.useSanitizeValueStrategy('escape');
....
app.filter('trusted', ['$sce', function($sce) {
    var div = document.createElement('div');
    return function(text) {
        div.innerHTML = text;
        return $sce.trustAsHtml(div.textContent);
    };
}])
....
<span ng-bind-html="'lng_pageFooter' | translate | trusted"></span>

...
$translateProvider.useSanitizeValueStrategy（'escape'）；
....
app.filter（'trusted'，['$sce'，function（$sce）{
var div=document.createElement（'div'）；
返回函数（文本）{
div.innerHTML=文本；
返回$sce.trustAsHtml（div.textContent）；
};
}])
....

只需使用innerHtml即可。例如

如果指令开发人员知道他们的代码，建议使用指令…为什么不起作用？实际上，这会大大减少您当前的标记，简化您的模板创建

ng html bind unsafe

已被弃用，这就是它不起作用的原因。@charlietfl您能指出指令的建议吗？您到底在哪里注入角度清理？哪个标签$sce？@Sorcher:当您按照如下方式实例化应用程序的模块时，您将注入

angular sanitize

模块：

angular.module（'myModule'，['ngSanitize'）您可以简化它：
您可以建议如何使用插值参数进行此操作吗？因此翻译字符串可能是
最大值：{{value}
@ChrisMoutray使用额外属性
translate values=“{value:10}”
未记录，但使用元素也可以，例如，
TRANSLATE\u KEY
我正在尝试使用此方法，而TRANSLATE KEY中的closing span标记将作为
添加到文本中`
“backend_error”：{“12004”：“无效的登录凭据”，“1111”：“电子邮件或密码不正确。您忘记密码了吗？”}，
翻译密钥输出如下：`忘记密码？'知道原因吗？请解释您所做的。避免仅代码应答欢迎使用堆栈溢出！虽然这个代码片段可以解决这个问题，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满代码，因为这会降低代码的可读性
"lng_pageFooter" : "Copyright © • 2018 • My Company • Powered by <a href=\"http://www.mycompany.com\">My Company™</a>"
...
$translateProvider.useSanitizeValueStrategy('escape');
....
app.filter('trusted', ['$sce', function($sce) {
    var div = document.createElement('div');
    return function(text) {
        div.innerHTML = text;
        return $sce.trustAsHtml(div.textContent);
    };
}])
....
<span ng-bind-html="'lng_pageFooter' | translate | trusted"></span>

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

"lng_pageFooter" : "Copyright © • 2018 • My Company • Powered by <a href=\"http://www.mycompany.com\">My Company™</a>"
...
$translateProvider.useSanitizeValueStrategy('escape');
....
app.filter('trusted', ['$sce', function($sce) {
    var div = document.createElement('div');
    return function(text) {
        div.innerHTML = text;
        return $sce.trustAsHtml(div.textContent);
    };
}])
....
<span ng-bind-html="'lng_pageFooter' | translate | trusted"></span>