Используйте угловой перевод с параметрами и 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в качестве параметра), затем установите переведенное значение в var и bind (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>

Рабочий Плункер

Не забудьте ввести $sce оказание услуг.