使用带参数和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：使用translate指令

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

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

我目前用于角度翻译的消毒策略是escaped，我尝试使用sanitize但是在法语中我的所有重音都转换为他们的html代码，例如：Déroulementd'unchapitre < / EM> 我也尝试了escapeParameters和sanitizeParameters策略，我总是得到：There is <b>2</b> value.

你知道我怎么做到这一点吗？

提前致谢 健

Answer 1

尝试这样的事情：

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

请记住加入$sce服务。

Answer 2

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

像这样（我没有使用ng-bind-html语法以简洁）：

控制器js

controllerAs

查看

$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);
            });

的 Working Plunker

请记住注入<p ng-bind-html="message"></p> 服务。