Как обрабатывать строки, содержащие HTML, используя Angular -Translate?

Есть ли способ сообщить angular и angular-translate для обработки строк, содержащих содержимое HTML.

У меня add_card-title = "To make ordering even quicker, add a card now" как строка Lang. Когда я использую его в своем шаблоне, пишу {{'add_card-title' | translate}}, я получаю строку как есть.

Вывод: To make ordering even quicker, add a card now ожидаемый результат: To make ordering even quicker, add a card now

Я знаю, что могу использовать ng-html-bind-unsafe, но это не помогает.

Не работает:

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

Есть ли способ достичь этого?

Вот мой плукер: http://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H?p=preview

Для справки вы можете увидеть эту проблему: https://github.com/PascalPrecht/angular-translate/issues/173

note: Я не хочу требовать от контроллера обрабатывать его.

Ответ 1

В наши дни вы можете сделать это без коробки angular -translate 2.0.

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

творит чудеса для меня.

Ответ 2

Вы должны использовать директиву ng-bind-html без фигурных скобок ({{}})

Чтобы узнать конфигурацию, необходимую для использования этой директивы (ngBindHtml), перейдите по этой ссылке: https://docs.angularjs.org/api/ng/directive/ngBindHtml

После включения ngSanitize должен работать следующий код:

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

Ответ 3

Я нашел решение. Я использовал AngularJS v1.2.0-rc.3, у которого ng-html-bind-unsafe устарел. Теперь angular имеет ng-bind-html вместо ng-html-bind-unsafe. Но нужно добавить angular-sanitize в качестве зависимости, чтобы заставить его работать.

Я заменил

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

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

и все началось.

Ответ 4

Это работает для меня... HTML интерпретируется для хорошего стиля (например, полужирный, курсив и т.д.)

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

Однако мне также нужно было убедиться, что я не использовал стратегию побега в настройке поставщика. Это немного испортило меня.

Работы: $translateProvider.useSanitizeValueStrategy( 'sanitize' );
Нет: $translateProvider.useSanitizeValueStrategy( 'escape' );

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

Использование: angular -транслят v2.13.1

Ответ 5

Вот несколько способов смешивания html (наряду с переменными области видимости, а также интерпретация, если вам нужны такие вещи, как ng-click в ваших переводах 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>

Ответ 6

По умолчанию escape-код и URL-адрес AngularJS отображаются по соображениям безопасности, вам нужно сообщить angular строки, которые вы не хотите убежать, в более старые времена, прежде чем разработчики AngularJS 1.2 могли бы это сделать, используя ng-bind-html-unsafe, но в AngularJS 1.2, который устарел.

Чтобы использовать теги html в строках, в AngularJS 1.2+ вам необходимо загрузить модуль angular-sanitize и включить его в зависимости от вашего приложения.

Любая строка содержит html-код, который вы можете отобразить с помощью ng-bind-html Автоматически использует $sanitize, в вашем случае это будет ng-bind-html="'add_card-title' | translate"

Для справки:

В среднем

Документация AngularJS

Ответ 7

Вы можете использовать 

Ответ 8

Я попробовал оба ваших ответа, и ни один из них не работал на 1.0.7, поэтому для всех, кто работает с pre 1.2, вы можете сделать это, как это

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