angularjsangular-translateng-bind-html

Use angular translate with parameters and HTML


I have a translation label with parameters and html :

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

I don't arrive to pass my parameter and to get the HTML interpreted. I try many option :

Option 1 : Use ng-bind-html with translate filter

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

But I get this error :

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} }}">"

Is there a way to use ng-bind-html with a parameter ?

Option 2 : Use translate directive

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

But what I get is for example : There is <b>2</b> value.

My current sanitize strategy for angular translate is escaped, I tried with sanitize but in french all my accent are converted into their html code, for example : Déroulement d'un chapitre I also try the escapeParameters and sanitizeParameters strategies and always I get : There is <b>2</b> value.

Do you know how I can achieve that ?

Thanks in advance Takeshi


Solution

  • Try something like this:

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

    Remember to include $sce service.