How to handle inline html with angular-translate

Question

Lets say I want to have an icon inline in the text

'Please scan the <span class="icon ion-barcode"></span> on the screen'

How would i add that to a translation with angular-translate without splitting the sentence into two parts ?

'{{ 'scan_1' | translate }} 
 <span class="icon icon-barcode"></span> 
 {{ 'scan_2' | translate }}'

....

.config(['$translateProvider', function ($translateProvider) {
  var translations = {
    en : {
      scan_1 : 'Please scan the', 
      scan_2 : 'on the screen', 
    }
  };

  $translateProvider
    .translations('en', translations.en)
    .preferredLanguage('en');
}])

This is not a scenario supported by the translation service. Why not simply copy the entire text including the <span> elements and have a translation setup for it. — Abhinav Gujjar
– Abhinav Gujjar, Commented Feb 23, 2015 at 8:19
The translation is interpolated as text, not HTML. If you you put html tags in the translation they will be escapes resulting in Please scan the <span class="icon ion-barcode"></span> on the screen. — haki
– haki, Commented Feb 23, 2015 at 8:30
possible duplicate of How to handle strings containing HTML using Angular-Translate? — DonJuwe
– DonJuwe, Commented Feb 23, 2015 at 8:32

Community · Accepted Answer · 2017-05-23 12:12:52Z

1

This might be possible with the translate directive:

<ANY translate="{{toBeInterpolated}}"></ANY>

Have a look here and here.

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Feb 23, 2015 at 8:33

DonJuwe

4,5634 gold badges37 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to handle inline html with angular-translate

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related