Angular Translate balises HTML

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

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

le modèle par défaut a le module Translate sur lui

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 texte, sur le fichier JSON, au lieu de s'

Bienvenue MON APPLICATION

je suis

Bienvenue
MON APPLICATION

Comment puis-je résoudre ce problème?

EDIT

Je ne veux pas supprimer les tags, mon fichier JSON est modifié par le backend, et il peut et contiendra des Tags HTML, je veux que ces tags fonctionnent sur la sortie.

exemple JADE où le contenu est reliure

div(class="col-lg-4 col-md-4 col-sm-4 col-xs-12 footer-left")
  p(class="text-center") 
    {{ 'page.PAGES_WELCOME' | translate }}
11
demandé sur DannyG 2015-08-18 22:10:16

5 réponses

Angular nettoie les chaînes html lors de leur interpolation. Pour contourner ce problème, vous devrez marquer le code HTML comme étant sûr dans $sce avant de l'injecter. Puis utilisez aussi ngBindHtml pour afficher le html.

je n'ai pas utilisé angular-translate avant, 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
répondu LessQuesar 2015-08-18 20:27:25

installer le module ngSanitize.

il vous permet de lier du contenu html, puis de changer votre code comme ceci:

ng-bind-html="'a_key_with_html' | translate"
2
répondu Serdar Değirmenci 2016-04-13 00:09:14

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

Bienvenue sur MON APPLICATION

je suis

Bienvenue

MY APP

Vous avez <br> qui est la rupture de la chaîne comme vous l'avez dit vous ne voulez pas donc l'enlever de la sorte: 

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

  "login": {
    .
    .
    .
    .
  },
1
répondu IfTrue 2015-08-18 19:21:39

en fait, je ne veux vraiment pas utiliser les balises dans mon modèle html. Les balises n'est pas significative.

j'ai finalement réussi à le faire fonctionner. Environnement: angulaire 1.5.8, angulaire-tranlsate: 2.11.0

ma solution est: 1. charge ngSanitize et init le module

  1. $translateProvider.useSanitizeValueStrategy('sanitize');

  2. <p ng-bind-html="'Please <strong>refresh</strong> the browser' | translate"></p>

1
répondu Bing Wu 2016-06-16 15:23:22

Testé avec AngularJS 1.4.7, j'utilise juste 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 est juste travaillé 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 le travail tout de suite.

0
répondu Osify 2016-01-28 09:22:01