Po przeczytaniu poradnika AngularJS krok 9 stworzyłem własny filtr AngularJS, który powinien konwertować dane boolowskie do html.
Oto mój kod filtra:
angular.module('phonecatFilters', []).filter('iconify', function () { // My custom filter
return function (input) {
return input ? '<i class="icon-ok"></i>' : '<i class="icon-remove"></i>';
}
});
Oto mój kod HTML:
<dt>Infrared</dt>
<dd>{{phone.connectivity.infrared | iconify }}"></dd>
Problem w tym, że borwser wyświetla zwracaną wartość dosłownie jako:
<i class="icon-ok"></i>
nie jako ikony (lub wyrenderowany html), które powinny się pojawić.
Myślę, że podczas tego procesu następuje pewna dezynfekcja.
Czy można wyłączyć tę sanityzację dla tego konkretnego filtra?
Wiem również, jak wyświetlać ikony, nie zwracając wyjścia HTML z filtru, a raczej po prostu „ok” lub „usuń” tekst, który mogę następnie zastąpić:
<i class="icon-{{phone.connectivity.infrared | iconify}}"><i>
ale nie tego chcę.
angular-sanitize.js
zadziałało , należy dołączyć plik. Jeśli chcesz zrobić to samo bez dołączania tej dodatkowej biblioteki, możesz użyćng-bind-html-unsafe
dyrektywy.ng-html-bind-unsafe
i wymaga, aby zawartość html była wyraźnie oznaczona jako `{{myContent | myFilter | html_safe}}
chyba że źle to czytam, podchodzisz w niewłaściwy sposób
Myślę, że ng-class to dyrektywa, której potrzebujesz do tej pracy i jest bezpieczniejsza niż renderowanie do atrybutu class.
w twoim przypadku po prostu dodaj łańcuch obiektu z ciągami znaków id jako klasą i wartością jako oszacowanym wyrażeniem
<i ng-class="{ 'icon-ok':!phone.connectivity.infrared, 'icon-remove':phone.connectivity.infrared }"></i>'
na marginesie, powinieneś używać tylko dyrektyw (wbudowanych i niestandardowych) do manipulowania html / dom, a jeśli potrzebujesz bardziej złożonego renderowania html, powinieneś zamiast tego spojrzeć na dyrektywę
źródło
<i ng-class="phone.connectivity.infrared ? 'icon-ok' : 'icon-remove'"></i>
Wypróbuj ten filtr
filter('trust', ['$sce',function($sce) { return function(value, type) { return $sce.trustAs(type || 'html', value); } }]);
wymaga kanciastego odkażania
var app = angular.module("myApp", ['ngSanitize']);
Gist Link
źródło