Comment créer un filtre angularjs qui génère du HTML

Question

Après la lecture de AngularJS tutoriel étape 9 J'ai créé mon propre AngularJS filtre, qui doit convertir les données booléennes en html.

Voici mon code de filtrage:

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

Voici mon code HTML:

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

Le problème est que borwser affiche la valeur retournée littéralement comme:

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

pas comme des icônes (ou de rendu html) qui doit apparaître.

Voici JSFiddle exemple

Je pense que la suppression se produit au cours de ce processus.

Est-il possible de transformer cette désinfection pour ce filtre spécifique?

Je sais aussi comment faire pour afficher les icônes en ne retournant pas le HTML en sortie de filtre, mais plutôt un simple " ok " ou "supprimer" le texte que j'ai peut alors se substituer à:

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

mais ce n'est pas ce que je veux.

Answer 1

Vous devez utiliser l' ng-bind-html directive (besoin d'importer le désinfecter module et le fichier js): http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml

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

Vous devez également importer le CSS (Bootstrap , je suppose) pour être en mesure de voir l'icône quand il fonctionne.

J'ai fourni un exemple de travail.

Answer 2

à moins que je le lis mal, vous vous approchez de la mauvaise manière

Je pense que ng-classe est la directive dont vous avez besoin pour ce travail et est sûr ensuite rendu à un attribut de classe.

dans votre cas il suffit d'ajouter de l'objet string avec les id les chaînes de la classe et de la valeur de l'expression évaluée

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

sur une note de côté, vous ne devez utiliser que les directives intégrées et personnalisées) pour manipuler le html/dom et si vous avez besoin d'une plus complexe de rendu html, vous devriez regarder la directive au lieu