使用带参数和 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.

我目前的角度翻译清理策略是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 作为参数），然后将翻译后的值设置为一个变量并绑定（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服务。