CODEWITHSUNDEEP
angularjsangular-translateng-bind-html
Tako
Tako

Reputation: 672

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

Upvotes: 2

Views: 6431

Answers (2)

lealceldeiro
lealceldeiro

Reputation: 14968

You could use the $translate service in order to get the string translated in the controller (providing the param as parameter), then set the translated value to a var and bind (ng-bind-html) this var in the view.

Something like this (I did not use the controllerAs syntax for brevity):

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

view

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

Working Plunker

Remember to inject the $sce service.

Upvotes: 0

Karol T
Karol T

Reputation: 1136

Try something like this:

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

Remember to include $sce service.

Upvotes: 3

Related Questions