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

Question

Sau khi đọc AngularJS tutorial step-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à rằng màn borwser trở giá trị theo nghĩa đen như:

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

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

Here is JSFiddle example

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

Có thể tắt tính năng khử trùng này cho bộ lọc cụ thể này không?

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

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

nhưng đây không phải là những gì tôi muốn .

Answer 1

Bạn nên sử dụng các chỉ thị ng-bind-html (yêu cầu để nhập khẩu các mô-đun Sanitize và file js): https://docs.angularjs.org/api/ng/directive/ngBindHtml

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

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

Tôi đã cung cấp working example.

Answer 2

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

Tôi nghĩ rằng ng-class là chỉ thị mà bạn cần cho công việc này và nó an toàn sau đó rendering để 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 như lớp và giá trị như các biểu hiện đánh giá

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

trên một mặt lưu ý, bạn chỉ nên sử dụng chỉ thị (built-in và tùy chỉnh) để thao tác html/dom và nếu bạn cần một người html phức tạp hơn làm cho bạn nên nhìn vào chỉ thị thay vì

Answer 3

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

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

Gist Link