web-dev-qa-db-fra.com

Angular Traduire les balises HTML

Je sais que cela a déjà été demandé ici auparavant, mais aucune des réponses ne semble fonctionner pour mon cas.

J'ai acheté ce thème Angle qui fonctionne avec Angular 1.4.2 et Angular translate 2.6.0 (même mis à jour jusqu'au dernier 2.7.2)

Le modèle par défaut a le module Traduire dessus

C'est le fichier de configuration 

  $translateProvider.useStaticFilesLoader({
      prefix : 'app/i18n/',
      suffix : '.json'
  });
  $translateProvider.preferredLanguage('es');
  $translateProvider.useLocalStorage();
  $translateProvider.usePostCompiling(true);
   // Enable escaping of HTML
  $translateProvider.useSanitizeValueStrategy('sanitize'); // I added this line based on Docs wasn't before

Et les fichiers de traduction au format JSON

  {
   "page": {
    "PAGES_WELCOME" : "Welcome to <br> MY APPLICATION, HEY THERE IS A BR TAG BEFORE ME"
  },

  "login": {
    .
    .
    .
    .
  },

Mais je ne peux pas ajouter de balises HTML dans le texte, sur le fichier JSON, au lieu de 

Bienvenue surMY APP

Je suis en train 

Bienvenue sur <br> MON APP

Comment puis-je réparer cela?

MODIFIER

Je ne veux PAS supprimer les balises, mon fichier JSON est modifié par le serveur, et il peut contenir des balises HTML. Je veux que ces balises fonctionnent sur la sortie.

Exemple JADE où le contenu est contraignant

div(class="col-lg-4 col-md-4 col-sm-4 col-xs-12 footer-left")
  p(class="text-center") 
    {{ 'page.PAGES_WELCOME' | translate }}
javascripthtmljsonangularjsangular-translate
11
DannyG

Angular désinfecte toutes les chaînes HTML lors de son interpolation . Pour résoudre ce problème, vous devez marquer le code HTML comme étant sûr en $ sce avant de procéder à l’injection. Ensuite, utilisez également ngBindHtml pour générer le code HTML.

Je n'ai pas utilisé angular-translate auparavant, mais cela peut fonctionner:

//app is the main module
app.filter("htmlSafe", ['$sce', function($sce) {
    return function(htmlCode){
        return $sce.trustAsHtml(htmlCode);
    };
}]);

//then to output it
<span data-ng-bind-html="'page.PAGES_WELCOME' | translate | htmlSafe"></span>
16
LessQuesar

Installez le module ngSanitize. 

Cela vous permet de lier du contenu HTML, puis de changer votre code comme suit:

ng-bind-html="'a_key_with_html' | translate"
2
Serdar Değirmenci

Mais je ne peux pas ajouter de balises HTML dans le texte, sur le fichier JSON, au lieu de

Bienvenue sur MY APP

Je suis en train

Bienvenue à

MON APP

Vous avez un <br> qui coupe la ligne comme vous avez dit que vous ne voulez pas, alors supprimez-le comme suit: 

{
   "page": {
    "PAGES_WELCOME" : "Welcome to {{appName}}"
  },

  "login": {
    .
    .
    .
    .
  },
1
IfTrue

Testé avec AngularJS 1.4.7, je viens d’utiliser ceci:

<span data-ng-bind-html="'my.i18n.code.to.translate.html.tags' | translate"></span>

Puisque je ne veux pas injecter de filtre, mais ci-dessus, je viens de travailler sur ma propre chaîne i18n de confiance. Bien sûr, la réponse acceptée serait plus sûre, mais celle-ci est juste un travail immédiat.

0
Osify