Contoh cara membatalkan pelepasan serpihan HTML dalam AngularJS_AngularJS

Hari ini saya cuba menggunakan Rails sebagai backend untuk menyediakan data dalam format JSON, dan AngularJS sebagai frontend untuk memproses data JSON Apa yang AngularJS dapat ialah sekeping teks HTML Jika anda menggunakan data-ng-bind secara langsung akan terlepas.

Tetapi jika anda menggunakan data-ng-bind-html secara langsung, ralat akan digesa

Salin kod Kod adalah seperti berikut:

Ralat: [$sce:unsafe] Percubaan untuk menggunakan nilai yang tidak selamat dalam konteks yang selamat.

Serpihan HTML perlu ditanda sebagai dipercayai menggunakan $sce.trustAsHtml(html_in_string) sebelum ia boleh dilepaskan menggunakan data-ng-bind-html="html_in_string".

Antara semua artikel yang Angular dapat semula melalui API atau di sini, setiap artikel mempunyai atribut html_body yang merupakan serpihan HTML yang diberikan oleh Markdown atau Org.

Selepas mendapatkan data JSON melalui API, gunakan kaedah angular.forEach yang disediakan oleh AngularJS untuk menandakan html_body bagi setiap siaran, simpan hasilnya sebagai trustedBody dan kemudian gunakan data-ng-bind-html="post in HTML .trustedBody "boleh tak terlepas.

Bahagian AngularJS

Salin kod Kod adalah seperti berikut:

Blog.controller('PostsController', fungsi ($skop, $http, $sce) {
$scope.posts = [];

$scope.syncPosts = fungsi () {
var request = $http.get('http://localhost:3000/posts.json');
request.success(fungsi (respons) {
$scope.posts = angular.forEach(angular.fromJson(respons), fungsi (post) {
         post.trustedBody = $sce.trustAsHtml(post.html_body);
});
});
};

$scope.syncPosts();
});

Bahagian HTML

Salin kod Kod adalah seperti berikut: