Bagaimanakah Saya Boleh Menyuntik Fragmen HTML Dinamik dengan Selamat ke dalam Pandangan AngularJS daripada Pengawal Saya?

Menyuntik Fragmen HTML ke dalam Paparan daripada Pengawal AngularJS

AngularJS menyediakan pelbagai cara untuk mengubah paparan secara dinamik berdasarkan logik pengawal. Dalam senario tertentu, keperluan timbul untuk menjana serpihan HTML secara dinamik dalam pengawal dan memaparkannya dalam paparan. Untuk mencapai matlamat ini, adalah perlu untuk mempertimbangkan cara AngularJS mentafsir kandungan yang disuntik.

Memahami AngularJS HTML Rendering

Apabila menetapkan sifat model kepada serpihan HTML, AngularJS secara automatik terlepas entiti HTML atas sebab keselamatan. Walau bagaimanapun, jika niatnya adalah untuk memaparkan HTML sebagai kandungan sebenar, pelarian ini memberikan cabaran. HTML yang terhasil dipaparkan sebagai rentetan dalam petikan, menghalang pelaksanaannya.

Penyelesaian untuk Memaparkan Serpihan HTML Dinamik

Untuk mengatasi had ini, AngularJS menyediakan penyelesaian berikut:

ng:bind-html (Angular 1.x)

Gunakan arahan ng:bind-html dalam HTML untuk memaparkan kandungan HTML yang diingini. Walau bagaimanapun, pendekatan ini menimbulkan potensi kelemahan keselamatan dan memerlukan penggunaan $sce atau ngSanitize.

$sce

Gunakan $sce.trustAsHtml() dalam pengawal untuk menandakan rentetan HTML sebagai selamat untuk rendering. Kaedah ini membolehkan kandungan disuntik ke dalam paparan tanpa melarikan diri:

$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize

Masukkan sumber angular-sanitize.min.js ke dalam HTML. Selain itu, sertakan ngSanitize dalam modul AngularJS dalam fail JavaScript:

angular.module('myApp', ['myApp.filters', 'myApp.services', 
    'myApp.directives', 'ngSanitize'])

Dengan menggunakan teknik ini, anda boleh memasukkan serpihan HTML yang dihasilkan secara dinamik dengan berkesan ke dalam paparan AngularJS daripada pengawal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyuntik Fragmen HTML Dinamik dengan Selamat ke dalam Pandangan AngularJS daripada Pengawal Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!