Je souhaite créer un pop-up bootstrap avec une balise pre contenant un object JSON prédéfini. La mise en œuvre naïve,
<span popover='{[ some_obj | json:" " ]}
' popover-sortinggger='mouseenter'>
échappe au contenu avant de l’insérer dans le popup. Quelle est la meilleure façon de spécifier un corps popover avec du contenu HTML?
MISE À JOUR :
Comme on peut le voir, vous devriez maintenant pouvoir le faire sans écraser le modèle par défaut.
ORIGINAL:
Depuis angular 1.2+ ng-bind-html-unsafe
a été supprimé. vous devriez utiliser le service $ sce . Référence
Voici un filtre pour créer du code HTML de confiance.
MyApp.filter('unsafe', ['$sce', function ($sce) { return function (val) { return $sce.trustAsHtml(val); }; }]);
Voici le modèle Angular Bootstrap 0.11.2 écrasé utilisant ce filtre
// update popover template for binding unsafe html angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) { $templateCache.put("template/popover/popover.html", "\n" + " \n" + "\n" + " \n" + " \n" + " \n" + " \n" + "\n" + ""); }]);
EDIT: Voici une implémentation de Plunker .
EDIT 2: Comme cette réponse continue à recevoir des hits, je la garderai à jour du mieux que je peux. En guise de référence Voici le modèle du repo angular-ui bootstrap. Si cela change, le modèle de substitution nécessitera les mises à jour correspondantes et l’ajout des atsortingbuts ng-bind-html=\"title | unsafe\"
et ng-bind-html=\"content | unsafe\"
pour continuer à travailler.
Pour la conversation mise à jour, vérifiez le problème ici .
Si vous utilisez une version de angular-ui égale ou supérieure à 0.13.0 , votre meilleure option est d’utiliser la directive popover-template
. Voici comment l’utiliser:
NB: N’oubliez pas les guillemets autour du nom du template dans popover-template="'popover.html'"
.
Voir le démon plunker
Par ailleurs, il est possible d’externaliser le modèle de popover dans un fichier HTML dédié, au lieu de le déclarer dans un élément