Cách tạo bộ lọc anglejs xuất ra HTML

Sau khi đọc hướng dẫn AngularJS bước-9, tôi đã tạo bộ lọc AngularJS của riêng mình, bộ lọc này sẽ chuyển đổi dữ liệu boolean thành html.

Đây là mã bộ lọc của tôi:

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

Đây là mã HTML của tôi:

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

Vấn đề là borwser hiển thị giá trị trả về theo nghĩa đen là:

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

không phải là các biểu tượng (hoặc html được kết xuất) sẽ xuất hiện.

Đây là ví dụ về JSFiddle

Tôi nghĩ rằng một số sanitisation xảy ra trong quá trình này.

Có thể tắt chế độ vệ sinh này cho bộ lọc cụ thể này không?

Ngoài ra, tôi biết cách hiển thị các biểu tượng bằng cách không trả lại đầu ra HTML từ bộ lọc mà chỉ trả về văn bản 'ok' hoặc 'remove' mà sau đó tôi có thể thay thế thành:

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

nhưng đây không phải là điều tôi muốn.

Bạn nên sử dụng lệnh ng-bind-html(yêu cầu nhập mô-đun sanitize và tệp js): https://docs.angularjs.org/api/ng/directive/ngBindHtml

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

Bạn cũng cần nhập CSS ( tôi đoán là Bootstrap ) để có thể nhìn thấy biểu tượng khi nó hoạt động.

Tôi đã cung cấp một ví dụ làm việc .

trừ khi tôi đọc nhầm, bạn đang tiếp cận sai cách

Tôi nghĩ ng-class là chỉ thị bạn cần cho công việc này và an toàn hơn khi hiển thị thuộc tính lớp.

trong trường hợp của bạn, chỉ cần thêm chuỗi đối tượng với chuỗi id là lớp và giá trị là biểu thức được đánh giá

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

một lưu ý nhỏ, bạn chỉ nên sử dụng các chỉ thị (tích hợp sẵn và tùy chỉnh) để thao tác html / dom và nếu bạn cần kết xuất html phức tạp hơn, bạn nên xem chỉ thị thay thế

Hãy thử bộ lọc này

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

yêu cầu vệ sinh góc cạnh

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

Liên kết Gist