CODEWITHSUNDEEP
angularjsinternationalizationangular-translate
haki
haki

Reputation: 9789

How to handle inline html with angular-translate

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');
}])

Upvotes: 4

Views: 1374

Answers (1)

DonJuwe
DonJuwe

Reputation: 4563

This might be possible with the translate directive:

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

Have a look here and here.

Upvotes: 1

Related Questions