Bagaimana untuk Memberikan Serpihan HTML dengan Selamat dalam Pandangan AngularJS?

Memasukkan Serpihan HTML ke dalam Paparan daripada Pengawal AngularJS

Dalam AngularJS, adalah mungkin untuk mencipta serpihan HTML dalam pengawal dan menjadikannya dipaparkan dalam paparan. Ini boleh berguna untuk menjana senarai secara dinamik atau elemen UI kompleks lain.

Untuk mencapai ini, mula-mula buat sifat model untuk memegang serpihan HTML. Dalam contoh di bawah, kami mencipta sifat "customHtml":

var SomeController = function () {
    this.customHtml = '<ul><li>render me please</li></ul>';
}

Seterusnya, gunakan arahan ng-bind-html dalam paparan untuk mengikat sifat customHtml kepada elemen:

<div ng-bind-html="customHtml"></div>

Walau bagaimanapun, AngularJS akan menjadikan HTML sebagai rentetan dalam petikan, kerana ia menganggapnya sebagai tidak selamat untuk tujuan sanitasi. Untuk menyelesaikan masalah ini, anda boleh sama ada menggunakan perkhidmatan $sce atau sertakan modul ngSanitize.

Menggunakan $sce

Mula-mula, masukkan perkhidmatan $sce ke dalam pengawal:

app.controller('SomeController', function($sce) {
    // ...
});

Kemudian, gunakan kaedah $sce.trustAsHtml() untuk menukar rentetan HTML kepada format selamat:

this.customHtml = $sce.trustAsHtml(someHtmlVar);

Menggunakan ngSanitize

Untuk menggunakan ngSanitize, masukkan dahulu skrip angular-sanitize.min.js:

<script src="lib/angular/angular-sanitize.min.js"></script>

Kemudian, masukkan ngSanitize sebagai kebergantungan dalam AngularJS anda modul:

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

Dengan ngSanitize, anda boleh memperuntukkan terus rentetan HTML kepada sifat model:

this.customHtml = someHtmlVar;

Kedua-dua kaedah membolehkan anda menjana dan menghasilkan serpihan HTML secara dinamik dalam paparan, memberikan fleksibiliti yang lebih besar dalam aplikasi AngularJS anda.

Atas ialah kandungan terperinci Bagaimana untuk Memberikan Serpihan HTML dengan Selamat dalam Pandangan AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!