使用带参数的 angular 翻译和 HTML

Question

我有一个带参数的翻译标签 html :

{
    "myLabel": "There is <b>{{param}}</b> value."
}

我不是来传递参数和解释 HTML 的。我尝试了很多选项 :

选项 1：使用带有翻译过滤器的 ng-bind-html

<p ng-bind-html="{{'myLabel' | translate:{param: vm.myParam} }}"></p>

但是我得到这个错误：

angular.js:14642 Error: [$parse:syntax] http://errors.angularjs.org/1.6.5/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7B'general.help.notion.text3'%20%7C%20translate%3A%7BnbButton%3A%20vm.nbBtn%7D%20%7D%7D&p4=%7B'general.help.notion.text3'%20%7C%20translate%3A%7BnbButton%3A%20vm.nbBtn%7D%20%7D%7D
    at angular.js:88
    at r.throwError (angular.js:15200)
    at r.object (angular.js:15189)
    at r.primary (angular.js:15078)
    at r.unary (angular.js:15066)
    at r.multiplicative (angular.js:15053)
    at r.additive (angular.js:15044)
    at relational (angular.js:15035)
    at r.equality (angular.js:15026)
    at r.logicalAND (angular.js:15018) "<b ng-bind-html="{{'general.help.notion.text3' | translate:{nbButton: vm.nbBtn} }}">"

有没有办法将 ng-bind-html 与参数一起使用？

选项 2：使用翻译指令

<p translate="myLabel" translate-values="{'param': vm.myParam}"> </p>

但是我得到的是例如：There is <b>2</b> value.

我目前对 angular 翻译的清理策略是 escaped，我尝试使用 sanitize 但是在法语中我所有的口音都被转换成他们的 html 代码，例如: Déroulement d'un chapitre 我也尝试了 escapeParameters 和 sanitizeParameters 策略，我总是得到：There is <b>2</b> value.

你知道我是怎么做到的吗？

提前致谢武

Answer 1

尝试这样的事情：

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

记得包含 $sce 服务。

Answer 2

您可以使用 $translate 服务来获取在控制器中翻译的字符串（提供 param 作为参数），然后将翻译后的值设置为 var 并绑定 (ng-bind-html) 视图中的这个变量。

类似这样的东西（为简洁起见，我没有使用 controllerAs 语法）：

控制器js

$scope.message = "About to be translated..."

  $translate('myLabel', {param: 1}).then(function (text) {
                $scope.message = $sce.trustAsHtml(text);
            }, function (textID) {
                $scope.message = $sce.trustAsHtml(text);
            });

查看

<p ng-bind-html="message"></p>

Working Plunker

记得注入 $sce 服务。

使用带参数的 angular 翻译和 HTML

Use angular translate with parameters and HTML

angularjs

ng-bind-html

angular-translate

选项 1：使用带有翻译过滤器的 ng-bind-html

选项 2：使用翻译指令