Cara membuat filter angularjs yang menghasilkan HTML

91

Setelah membaca tutorial AngularJS langkah-9 saya telah membuat filter AngularJS saya sendiri, yang seharusnya mengubah data boolean menjadi html.

Ini kode filter saya:

angular.module('phonecatFilters', []).filter('iconify', function () { // My custom filter
    return function (input) {
        return input ? '<i class="icon-ok"></i>' : '<i class="icon-remove"></i>';
    }
});

Ini kode HTML saya:

<dt>Infrared</dt>
  <dd>{{phone.connectivity.infrared | iconify }}"></dd>

Masalahnya adalah borwser menampilkan nilai yang dikembalikan secara harfiah sebagai:

<i class="icon-ok"></i>

bukan sebagai ikon (atau html yang dirender) yang seharusnya muncul.

Berikut adalah contoh JSFiddle

Saya pikir beberapa sanitasi terjadi selama proses ini.

Apakah mungkin untuk menonaktifkan sanitasi ini untuk filter khusus ini?

Saya juga tahu cara menampilkan ikon dengan tidak mengembalikan output HTML dari filter melainkan hanya teks 'ok' atau 'hapus' yang kemudian dapat saya gantikan:

<i class="icon-{{phone.connectivity.infrared | iconify}}"><i>

tapi ini bukan yang kuinginkan.

angularjs Pavel Kostenko
sumber

Jawaban:

112

Anda harus menggunakan ng-bind-htmldirektif (perlu mengimpor modul sanitasi dan file js): https://docs.angularjs.org/api/ng/directive/ngBindHtml

<span ng-bind-html='phone.connectivity.infrared | iconify'></span>

Anda juga perlu mengimpor CSS ( Saya rasa Bootstrap ) untuk dapat melihat ikon saat berfungsi.

Saya telah memberikan contoh kerja .

Guillaume86
sumber
2
Nah itu satu-satunya cara yang saya tahu untuk mengeluarkan html mentah dengan angularJS dan pengikatan ini hanya diperbolehkan pada atribut sehingga Anda tidak punya banyak pilihan, Anda dapat menulis direktif Anda sendiri yang menerima komentar atau pengikatan elemen, ambil kode sumber dari bind- html untuk titik awal: github.com/angular/angular.js/blob/master/src/ngSanitize/…
Guillaume86
2
Arahan mungkin merupakan solusi terbaik di sini <check-icon ng: model = 'phone.connectivity.infrared'> </check-icon> tetapi tidak lebih pendek dari solusi Anda;)
Guillaume86
7
Satu hal yang perlu diperhatikan adalah Anda perlu menyertakan angular-sanitize.jsfile agar ini berfungsi. Jika Anda ingin melakukan hal yang sama tanpa menyertakan pustaka tambahan ini, Anda dapat menggunakan ng-bind-html-unsafedirektif.
nwinkler
4
angular 2.x turun ng-html-bind-unsafedan mengharuskan konten html secara eksplisit ditandai sebagai 'aman' - lihat: docs.angularjs.org/api/ng.$sce#Example
hooblei
1
Harus ada filter default html_safe:{{myContent | myFilter | html_safe}}
Augustin Riedinger
17

kecuali saya salah membacanya, Anda mendekati dengan cara yang salah

Saya pikir ng-class adalah arahan yang Anda butuhkan untuk pekerjaan ini dan lebih aman daripada rendering ke atribut class.

dalam kasus Anda tambahkan saja string objek dengan string id sebagai kelas dan nilai sebagai ekspresi yang dievaluasi

<i ng-class="{
'icon-ok':!phone.connectivity.infrared,
'icon-remove':phone.connectivity.infrared
}"></i>'

di samping catatan, Anda sebaiknya hanya menggunakan direktif (bawaan dan kustom) untuk memanipulasi html / dom dan jika Anda membutuhkan render html yang lebih kompleks, Anda harus melihat direktif sebagai gantinya

Gerard
sumber
Solusi yang bagus. Atau dilakukan sedikit lebih sederhana: <i ng-class="phone.connectivity.infrared ? 'icon-ok' : 'icon-remove'"></i>
Kisi Trekkor
12

Coba filter ini

filter('trust', ['$sce',function($sce) {
  return function(value, type) {
    return $sce.trustAs(type || 'html', value);
  }
}]);

membutuhkan pembersihan sudut

var app = angular.module("myApp", ['ngSanitize']);

Tautan Inti

Vikrant Mahajan
sumber