วิธีสร้างตัวกรอง angularjs ซึ่งส่งออก HTML

หลังจากอ่านบทช่วยสอน AngularJS ขั้นตอนที่ 9 ฉันได้สร้างตัวกรอง AngularJS ของตัวเองซึ่งควรแปลงข้อมูลบูลีนเป็น html

นี่คือรหัสตัวกรองของฉัน:

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

นี่คือรหัส HTML ของฉัน:

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

ปัญหาคือ borwser แสดงค่าที่ส่งคืนตามตัวอักษร:

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

ไม่ใช่เป็นไอคอน (หรือ html ที่แสดงผล) ที่ควรปรากฏ

นี่คือตัวอย่าง JSFiddle

ฉันคิดว่าการฆ่าเชื้อบางอย่างเกิดขึ้นในระหว่างกระบวนการนี้

เป็นไปได้ไหมที่จะปิดการฆ่าเชื้อนี้สำหรับตัวกรองเฉพาะนี้

นอกจากนี้ฉันรู้วิธีแสดงไอคอนโดยไม่ส่งคืนเอาต์พุต HTML จากตัวกรอง แต่ใช้แค่ข้อความ 'ok' หรือ 'remove' ซึ่งฉันสามารถใช้แทน:

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

แต่นี่ไม่ใช่สิ่งที่ฉันต้องการ

คุณควรใช้ng-bind-htmlคำสั่ง (ต้องนำเข้าโมดูลฆ่าเชื้อและไฟล์ js): https://docs.angularjs.org/api/ng/directive/ngBindHtml

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

คุณต้องนำเข้า CSS ด้วย ( Bootstrap I guess) เพื่อให้สามารถเห็นไอคอนเมื่อทำงานได้

ผมได้ให้ตัวอย่างการทำงาน

เว้นแต่ฉันจะอ่านผิดคุณกำลังเข้ามาในทางที่ผิด

ฉันคิดว่า ng-class เป็นคำสั่งที่คุณต้องการสำหรับงานนี้และปลอดภัยกว่าเมื่อแสดงผลเป็นแอตทริบิวต์คลาส

ในกรณีของคุณเพียงแค่เพิ่มสตริงออบเจ็กต์ด้วยสตริง id เป็นคลาสและค่าเป็นนิพจน์ที่ประเมิน

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

ในบันทึกด้านข้างคุณควรใช้คำสั่ง (ในตัวและกำหนดเอง) เพื่อจัดการ html / dom และหากคุณต้องการการเรนเดอร์ html ที่ซับซ้อนมากขึ้นคุณควรดูคำสั่งแทน

ลองใช้ตัวกรองนี้

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

ต้องมีการฆ่าเชื้อเชิงมุม

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

ลิงก์ Gist