Bagaimana untuk menangani string yang berisi HTML yang menggunakan Sudut-Translate?
Apakah ada cara untuk memberitahu sudut dan sudut-translate]1 untuk menangani string yang berisi konten HTML.
Saya memiliki add_card-title = "Untuk membuat pemesanan lebih cepat, <span class="nowrap">add a card sekarang</span>" saya Lang string. Ketika saya menggunakannya di template saya dengan menulis <p>{{'add_card-judul' | terjemahan}}</p> aku mendapatkan string yang seperti itu.
Output: Untuk membuat pemesanan lebih cepat, <span class="nowrap">add a card sekarang</span>
output yang diharapkan: Untuk membuat pemesanan lebih cepat, tambahkan kartu sekarang
Aku tahu aku bisa menggunakan ng-html-mengikat-tidak aman tapi itu tidak membantu.
Tidak bekerja:
<p ng-html-bind-unsafe="{{'add_card-title' | translate}}"></p>Apakah ada cara untuk mencapai hal itu?
Di sini saya plunker: http://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H?p=preview
Untuk referensi anda bisa melihat masalah ini: https://github.com/PascalPrecht/angular-translate/issues/173
catatan: saya tidak ingin invlove controller untuk menangani hal itu.
Anda dapat melakukan ini keluar dari kotak dengan sudut-translate 2.0 hari ini.
<p translate="{{ 'PASSED_AS_INTERPOLATION' }}"></p> bekerja keajaiban bagi saya.
Anda harus menggunakan ng-mengikat-html direktif tanpa kurung kurawal ({{ }})
Untuk mengetahui konfigurasi yang diperlukan dalam rangka untuk menggunakan direktif (ngBindHtml), ikuti link ini: https://docs.angularjs.org/api/ng/directive/ngBindHtml
Setelah ngSanitize disertakan, berikut kode yang harus bekerja:
<p ng-bind-html="'add_card-title' | translate"></p>
Ini bekerja untuk saya... HTML ditafsirkan untuk styling yang baik (misalnya: tebal, miring, dll.)
<p translate="translationId"></p>Namun, saya juga dibutuhkan untuk memastikan bahwa aku tidak't melarikan diri menggunakan strategi dalam penyedia setup. Itu membuatku kacau untuk sementara waktu.
- Karya:
$translateProvider.useSanitizeValueStrategy( 'membersihkan' ); - Nope:
$translateProvider.useSanitizeValueStrategy( 'melarikan diri' );
https://angular-translate.github.io/docs/#/guide/19_security
Menggunakan: sudut-translate v2.13.1
Anda dapat menggunakan <p [innerHTML]=",'add_card-judul' | translate"></p>
Saya telah menemukan solusi.
Saya menggunakan AngularJS v1.2.0-rc.3 yang punya ng-html-mengikat-tidak aman usang. Sekarang sudut memiliki ng-mengikat-html bukan ng-html-mengikat-tidak aman. Tapi satu harus inject sudut-membersihkan sebagai ketergantungan untuk membuatnya bekerja.
Saya diganti
<p ng-html-bind-unsafe="{{'add_card-title' | translate}}"></p>dengan
<p ng-bind-html="'{{'add_card-title' | translate}}'"></p>dan hal-hal mulai bekerja.
Berikut ini adalah beberapa cara untuk mencampur html (bersama dengan lingkup variabel, bersama dengan interpretion jika anda perlu hal-hal seperti ng-klik di html terjemahan):
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>
Secara default AngularJS melarikan diri dan kode ini akan menampilkan untuk alasan keamanan, anda perlu untuk memberitahu sudut dari string anda don't ingin melarikan diri, di masa tua sebelum AngularJS 1.2 pengembang bisa melakukan itu dengan menggunakan ng-mengikat-html-tidak aman tapi di AngularJS 1.2 yang telah usang.
Untuk menggunakan html tag dalam string, di AngularJS 1.2+, anda perlu untuk men-download sudut-membersihkan modul dan memasukkannya ke dalam aplikasi anda ketergantungan.
Setiap string yang berisi kode html yang anda dapat menampilkannya dengan menggunakan ng-mengikat-html secara Otomatis menggunakan $membersihkan, dalam hal ini akan ng-mengikat-html=",'add_card-judul' | translate"
Untuk referensi:
