Filtr kątowy, który generuje html

Question

Mam mały filtr kątowy, który wstawia ikonę (ładowanie początkowe) w miejsce wartości rzeczywistej. To działa, ale jest kodowane html:

var conApp = angular.module('conApp', []); 
    conApp.filter('trueIcon', function($filter){ 
    return function(booleanValue){ 
     return booleanValue ? '<i class="icon-ok"></i>' : ''; 
    } 
    }); 

muszę wdrożyć inny filtr do dekodowania html? Czy istnieje "kątowa" metoda robienia tego?

Answer 1

Musisz użyć ng-bind-html do renderowania html.

<span ng-bind-html="foo | trueIcon"></span> 

To powiedziawszy ... to naprawdę nie jest to, po co są filtry. Filtry są bardziej przeznaczone do szorowania danych zapisywanych w widoku, niż do generowania elementów samego widoku/DOM. Prawdopodobnie lepiej będzie dla ciebie stworzyć dyrektywę:

app.directive('trueIcon', function() { 
    return { 
     restrict: 'E', 
     template: '<i ng-class="{\'icon-ok\': value, \'icon-not-okay\': !value}"></i>', 
     scope: { 
     value: '=' 
     } 
    }; 
}); 

<true-icon value="foo"></true-icon> 

Answer 2

AngularJS domyślnie oczyszcza wyniki oceny ekspresji. Aby wyświetlić znaczniki HTML jak masz 2 opcje:

• http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml (z modułu ngSanitize)
• http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe (nie polecam ten, ponieważ otwiera ona potencjalne zagrożenie bezpieczeństwa).

Powyższe sprawi, że filtr będzie działał, ale może warto rozważyć zamianę go na dyrektywę?