Есть ли способ, чтобы сказать Angular и угловые-перевод для обработки строк, который содержит HTML-содержимого.
У меня есть add_card-заголовок = ", чтобы сделать заказ еще быстрее, но <промежуток класс="и без переноса" и>добавить карту теперь</службы>"в качестве моего языковых строк. Когда я использую его в мой шаблон, написав
<п>{{'add_card титула' | Перевод}}</п>` я получаю строку, как это.
Выход: чтобы сделать заказ еще быстрее, но <промежуток класс="и без переноса" и>добавить карту теперь</службы>` ожидаемые результаты: чтобы сделать заказ еще быстрее, добавить карту сейчас
Я знаю, что я могу использовать НГ-HTML-код-привязка-небезопасна, но это не помогает.
Не работает:
<p ng-html-bind-unsafe="{{'add_card-title' | translate}}"></p>
Есть ли способ, чтобы достичь этого?
Вот мой plunker: http://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H?p=preview
Для справки вы можете посмотреть этот вопрос: https://github.com/PascalPrecht/angular-translate/issues/173
примечание: Я не хочу подключаться контроллер, чтобы справиться с этим.
Вы можете сделать это из коробки с угловой-перевести 2.0 в эти дни.
<p translate="{{ 'PASSED_AS_INTERPOLATION' }}"></p>
творит чудеса для меня.
Вы должны использовать НГ-привязать к HTML-директива без фигурных скобок ({{ }})
Знать конфигурацию, необходимую для того, чтобы использовать эту директиву (ngBindHtml), следуйте по этой ссылке: https://docs.angularjs.org/api/ng/directive/ngBindHtml
После ngSanitize включена, то следующий код должен работать:
<p ng-bind-html="'add_card-title' | translate"></p>
Это работает для меня... в формате HTML интерпретируется для хороших стили (например, жирный, курсив и т. д.)
<p translate="translationId"></p>
Однако, я также нужно, чтобы убедиться, что я вовсе't использование стратегии побег в настройках провайдера. Что испортили мне настроение на некоторое время.
$translateProvider.useSanitizeValueStrategy( 'дезинфекции' );
$translateProvider.useSanitizeValueStrategy( 'побег' );
https://angular-translate.github.io/docs/#/guide/19_security
Используя: угловой-перевести В2.13.1
Вы можете использовать <п [innerHTML будет]=" - а'add_card титула' | перевести" и></п>
Я нашел решение.
Я с помощью AngularJS не В1.2.0-радиоуправляемый.3что есть
НГ-HTML-код-привязка-небезопасноустаревшие. Теперь угловой уже НГ-привязать к HTML
вместо НГ-HTML-код-привязка-небезопасно
. Но для того чтобы впрыснуть угловые-санировать как зависимость, чтобы заставить его работать.
Я заменил
<p ng-html-bind-unsafe="{{'add_card-title' | translate}}"></p>
с
<p ng-bind-html="'{{'add_card-title' | translate}}'"></p>
и все начало работать.
Здесь много способов, чтобы смешивать HTML-код (вместе с областью переменных, наряду с interpretion, если вам нужны такие вещи, как НГ-нажмите кнопку в 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>
"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>
По умолчанию в AngularJS побег и код он отображает по соображениям безопасности, вы должны рассказать угловые строк, вы не'т хотим, чтобы бежать, в старые времена, прежде чем в AngularJS 1.2 разработчики могли бы сделать это с помощью `НГ-привязать к HTML-небезопасна, но на AngularJS 1.2, которая была удалена.
Чтобы использовать HTML-теги в строках, на AngularJS 1.2+, вам необходимо скачать `угловой-санировать модуль и включить его в ваш зависимостей приложения.
Любая строка содержит HTML-код, вы можете отобразить его с помощью НГ-привязать к HTML
автоматически использует $санировать, в вашем случае это будет НГ-привязать к HTML=и"'add_card-название' | переводить на"
Для справки: