HTML çıktısı veren angularjs filtresi nasıl oluşturulur

AngularJS öğretici adım-9'u okuduktan sonra , boole verilerini html'ye dönüştürmesi gereken kendi AngularJS filtremi oluşturdum.

İşte filtre kodum:

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

İşte HTML kodum:

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

Sorun şu ki, Borwser döndürülen değeri tam anlamıyla şu şekilde görüntülüyor:

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

görünmesi gereken simgeler (veya oluşturulmuş html) olarak değil.

İşte JSFiddle örneği

Sanırım bu süreçte bir miktar temizlik meydana geliyor.

Bu özel filtre için bu temizlemeyi kapatmak mümkün müdür?

Ayrıca, filtreden HTML çıktısını döndürmeyerek simgelerin nasıl görüntüleneceğini biliyorum, bunun yerine yalnızca 'tamam' veya 'kaldır' metni daha sonra yerine koyabileceğim:

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

ama istediğim bu değil.

Yönergeyi kullanmalısınız ng-bind-html(sanitize modülünü ve js dosyasını içe aktarmanız gerekir): https://docs.angularjs.org/api/ng/directive/ngBindHtml

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

Simgeyi çalışırken görebilmek için CSS'yi ( sanırım Bootstrap ) içe aktarmanız gerekir .

Çalışan bir örnek verdim .

ben yanlış okumadıysam, yanlış yöne yaklaşıyorsun

Sanırım ng-sınıfı, bu iş için ihtiyaç duyduğunuz yönerge ve sınıf niteliğine göre daha güvenli.

sizin durumunuzda, sınıf olarak id dizelerini ve değerlendirilen ifade olarak değeri içeren nesne dizesini ekleyin

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

bir yan not olarak, html / dom'u değiştirmek için yalnızca yönergeleri (yerleşik ve özel) kullanmalısınız ve daha karmaşık bir html oluşturmaya ihtiyacınız varsa, bunun yerine yönergeye bakmalısınız.

Bu filtreyi deneyin

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

açısal sterilizasyon gerektirir

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

Ana Bağlantı