Kata pengantar
Salah satu kekuatan AngularJS adalah fitur pengikat dua arah data yang kuat. Dua hal yang sering kita gunakan adalah NG-Bind dan NG-model untuk bentuk.
Tetapi dalam proyek kami, kami akan menemukan situasi ini, data yang dikembalikan di latar belakang berisi berbagai tag HTML.
menyukai:
$ scope.currentwork.description = "Halo, <br> <b> Kemana kita akan pergi hari ini? </b>"
Kami menggunakan instruksi seperti ng-bind-html untuk mengikat, tetapi hasilnya bukan yang kami inginkan.
Itu saja
halo, kemana kita akan pergi hari ini?
Apa yang harus dilakukan?
Untuk versi sudut 1.2, kita harus menggunakan layanan $ SCE untuk menyelesaikan masalah kita. SCE yang disebut adalah singkatan dari "melarikan diri kontekstual yang ketat". Diterjemahkan ke dalam bahasa Cina adalah "mode konteks yang ketat" dan juga dapat dipahami sebagai pengikatan yang aman.
Mari kita lihat bagaimana menggunakannya.
Kode Pengontrol:
$ http.get ('/API/work/get? workid =' + $ routeParams.workid) .success (function (work) {$ scope.currentwork = work;});Kode HTML:
<p> {{currentwork.description}} </p> Konten yang kami kembalikan berisi serangkaian tag HTML. Hasilnya ditunjukkan seperti yang kami katakan di awal artikel. Saat ini kita harus mengatakannya untuk mengikat dengan aman. Ini dapat dilakukan dengan menggunakan $ sce.trustAsHtml() . Metode ini mengubah nilai menjadi penerimaan istimewa dan menggunakan "ng-bind-html" dengan aman. Jadi, kami harus memperkenalkan layanan $ SCE di pengontrol kami
controller ('TransferWorkStep2', ['$ scope', '$ http', '$ routeParams', '$ sce', function ($ scope, $ http, $ routeParams, $ sce) {$ http.get ('/API/work/get? Workid =' + $ routeParaR.CURP.get ('/API. bekerja;Kode HTML:
<p ng-bind-html = "currentwork.description"> </p>
Hasil ini disajikan dengan sempurna di halaman:
halo kemana kita akan pergi hari ini?
Kami juga dapat menggunakannya seperti ini, merangkumnya menjadi filter dan memanggilnya pada templat kapan saja.
app.filter ('to_trusted', ['$ sce', function ($ sce) {return function (teks) {return $ sce.trustashtml (teks);};}]);Kode HTML:
<p ng-bind-html = "Currentwork.Description | to_trusted"> </p>
Meringkaskan
Di atas adalah semua tentang NG-bind-HTML Directive dan $ SCE Service di AngularJS. Saya berharap ini akan membantu Anda belajar atau bekerja. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi.