Comment créer un popover bootstrap d’interface utilisateur AngularJS avec du contenu HTML?

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 .

Utilisez la directive popover-template

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

free
web stats