javascript - programacion - ¿Cómo manejar cadenas que contienen HTML usando Angular-Translate?

ngx-translate angular 6

Question

¿Hay alguna manera de decir angular y angular-translate para manejar cadenas que contiene contenido HTML.

Tengo add_card-title = "To make ordering even quicker, <span class="nowrap">add a card now</span>" como mi cadena Lang. Cuando lo uso en mi plantilla escribiendo <p>{{''add_card-title'' | translate}}</p> <p>{{''add_card-title'' | translate}}</p> Obtengo cadena como es.

Salida: To make ordering even quicker, <span class="nowrap">add a card now</span> salida esperada: To make ordering even quicker, add a card now

Sé que puedo usar ng-html-bind-unsafe pero no está ayudando.

No funciona:

<p ng-html-bind-unsafe="{{''add_card-title'' | translate}}"></p>

¿Hay alguna forma de lograrlo?

Aquí está mi plunker: http://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H?p=preview

Como referencia, puede ver este problema: https://github.com/PascalPrecht/angular-translate/issues/173

Nota: no quiero involucionar al controlador para manejarlo.

Answer 1

Aquí hay muchas maneras de mezclar html (junto con variables de ámbito, junto con la interpretación si necesita cosas como ng-click en sus traducciones html):

http://plnkr.co/edit/OnR9oA?p=preview

<div>{{''TESTING1_SIMPLE_VAR_REPLACE'' | translate: ''{name: "John Smith", username: "john.smith12"}''}}</div>
<div translate=''TESTING1_SIMPLE_VAR_REPLACE'' translate-values=''{ name: "Jake Smith", username: "jake-smith-101"  }''></div> 
<div translate="TESTING1_SIMPLE_VAR_REPLACE_NA" translate-value-name="{{name}}" translate-value-username="{{username}}" translate-default="Hello {{name}} ({{username}})"></div>

<br/><br/>
<div>{{''TESTING1_SIMPLEHTML'' | translate}}</div><!-- doesn''t compile the html -->
<div translate="TESTING1_SIMPLEHTML" translate-default=''DEFAULT(not used since there is a translation): This <b>translation</b> has a <a href="http://google.com" target="_blank">link</a>.''></div><!-- this and below compile the html -->
<div translate="TESTING1_SIMPLEHTML_NA" translate-default="DEFAULT(used since translation not available): This <b>translation</b> has a <a href=''http://google.com'' target=''_blank''>link</a>."></div>
Uses ng-bind-html and sanitize: <div ng-bind-html="''TESTING1_SIMPLEHTML'' | translate"></div>


<br/><br/>
<div translate="TESTING2_SCOPE" translate-values="{timer: timer}" translate-default="DEFAULT(not used since there is a translation): Seconds: <a href=''http://google.com'' target=''_blank''>{{timer}} seconds</a>."></div>
<div translate="TESTING2_SCOPE" translate-value-timer="{{timer}}"></div>
<div translate="TESTING2_SCOPE_NA" translate-default="DEFAULT(used since translation not available): Seconds: <a href=''http://google.com'' target=''_blank''>{{timer}} seconds</a>."></div>

<br/><br/>
<div compile-unsafe="''TESTING3_COMPILE'' | translate"></div><!-- old way to do before angular 2.0-->
<div translate="TESTING3_COMPILE" translate-compile></div>
<div translate="{{''TESTING3_COMPILE_SCOPE''}}" translate-compile translate-value-name="{{name}}" translate-value-username="{{username}}" ></div> <!-- not sure of advantage of this style, but saw an example of it -->
<div translate="TESTING3_COMPILE_SCOPE"       translate-compile translate-value-name="{{name}}" translate-value-username="{{username}}" ></div> 
<div translate="TESTING3_COMPILE_SCOPE"       translate-compile translate-values=''{ name: "Jake Smith", username: "jake-smith-101"  }'' ></div>

Answer 2

Debe usar la directiva ng-bind-html sin llaves ({{}})

Para conocer la configuración necesaria para usar esa directiva (ngBindHtml), siga este enlace: https://docs.angularjs.org/api/ng/directive/ngBindHtml

Después de incluir ngSanitize, el siguiente código debería funcionar:

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

Answer 3

Esto funciona para mí ... el HTML se interpreta para un estilo agradable (por ejemplo, negrita, cursiva, etc.)

<p translate="translationId"></p>

Sin embargo, también necesitaba asegurarme de que no estaba usando la estrategia de escape en la configuración del proveedor. Eso me fastidió por un tiempo.

• Works: $translateProvider.useSanitizeValueStrategy( ''sanitize'' );
• Nope: $translateProvider.useSanitizeValueStrategy( ''escape'' );

https://angular-translate.github.io/docs/#/guide/19_security

Usando: angular-translate v2.13.1

Answer 4

He encontrado la solución. Estaba usando AngularJS v1.2.0-rc.3 que tiene AngularJS v1.2.0-rc.3 ng-html-bind-unsafe . Ahora angular tiene ng-bind-html lugar de ng-html-bind-unsafe . Pero uno tiene que inyectar angular-sanitize como una dependencia para que funcione.

Reemplacé

<p ng-html-bind-unsafe="{{''add_card-title'' | translate}}"></p>

con

<p ng-bind-html="''{{''add_card-title'' | translate}}''"></p>

y las cosas comenzaron a funcionar.

Answer 5

Intenté ambas respuestas y ninguna de ellas funcionó en 1.0.7, así que para todos los que estén trabajando pre 1.2 puedes hacerlo así

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

Answer 6

Por defecto AngularJS escape y el código que muestra por razones de seguridad, necesita indicar el angulo de las cadenas de las que no quiere escapar, en épocas anteriores, antes de que los desarrolladores de AngularJS 1.2 pudieran hacerlo utilizando ng-bind-html-unsafe pero en AngularJS 1.2 que ha sido desaprobado.

Para usar etiquetas html en cadenas, en AngularJS 1.2+, necesita descargar el módulo de angular-sanitize e incluirlo en las dependencias de su aplicación.

Cualquier cadena contiene código html, puede mostrarla usando ng-bind-html Automáticamente usa $ sanitize, en su caso será ng-bind-html="''add_card-title'' | translate"

Para referencia:

En medio

Documentación AngularJS

Answer 7

Puede usar <p [innerHTML]="''add_card-title'' | translate"></p>

Answer 8

Puedes hacer esto de fábrica con angular-translate 2.0 en estos días.

<p translate="{{ ''PASSED_AS_INTERPOLATION'' }}"></p> 

funciona de maravilla para mí.

Answer 9

"lng_pageFooter" : "Copyright © • 2018 • My Company • Powered by <a href=/"http://www.mycompany.com/">My Company™</a>"
...
$translateProvider.useSanitizeValueStrategy(''escape'');
....
app.filter(''trusted'', [''$sce'', function($sce) {
    var div = document.createElement(''div'');
    return function(text) {
        div.innerHTML = text;
        return $sce.trustAsHtml(div.textContent);
    };
}])
....
<span ng-bind-html="''lng_pageFooter'' | translate | trusted"></span>