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>{{&#39;add_card-judul&#39; | 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.

Pemrograman
javascript angularjs
3 November 2013 в 3:08
33 tayangan
Mengomentari pertanyaan (3)

Anda dapat melakukan ini keluar dari kotak dengan sudut-translate 2.0 hari ini. 

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

bekerja keajaiban bagi saya.

Dominik Hadl
Jawaban edit 30 Oktober 2014 в 8:43
Komentar (7)

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>
Komentar (0)

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( &#39;membersihkan&#39; );
  • Nope: $translateProvider.useSanitizeValueStrategy( &#39;melarikan diri&#39; );

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

Menggunakan: sudut-translate v2.13.1

Komentar (2)

Anda dapat menggunakan <p [innerHTML]=",&#39;add_card-judul&#39; | translate"></p>

Komentar (0)

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.

lukkea
Jawaban edit 7 April 2015 в 2:29
Komentar (3)

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>
<div translate="TESTING1_SIMPLEHTML" translate-default='DEFAULT(not used since there is a translation): This btranslation/b has a a href="http://google.com" target="_blank"link/a.'></div>
<div translate="TESTING1_SIMPLEHTML_NA" translate-default="DEFAULT(used since translation not available): This btranslation/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>
<div translate="TESTING3_COMPILE" translate-compile></div>
<div translate="{{'TESTING3_COMPILE_SCOPE'}}" translate-compile translate-value-name="{{name}}" translate-value-username="{{username}}" ></div> 
<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>
armyofda12mnkeys
Jawaban edit 5 Oktober 2016 в 10:08
Komentar (0)
 
"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>
Komentar (4)

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=",&#39;add_card-judul&#39; | translate"

Untuk referensi:

Menengah

AngularJS Dokumentasi

Komentar (0)

Aku mencoba kedua jawaban anda dan tidak satupun dari mereka bekerja pada 1.0.7 jadi untuk semua orang yang's bekerja pra 1.2 anda dapat melakukannya seperti ini

<p ng-html-bind-unsafe="'add_card_title' | translate"></p>
Komentar (0)