Come posso creare un popover bootstrap con interfaccia utente AngularJS con contenuto HTML?

Voglio creare un popover bootstrap con un tag pre contenente un object JSON prettified. L’ingenua implementazione,

<span popover='
{[ some_obj | json:" " ]}

' popover-trigger='mouseenter'>

sfugge al contenuto prima di inserirlo nel popup. Qual è il modo migliore per specificare un corpo popover con contenuti html?

AGGIORNAMENTO :

Come si può vedere in questo , ora dovresti essere in grado di farlo senza sovrascrivere il modello predefinito.

ORIGINALE:

A partire da angular 1.2+ ng-bind-html-unsafe è stato rimosso. dovresti usare il servizio $ sce . Riferimento

Ecco un filtro per creare html fidati.

 MyApp.filter('unsafe', ['$sce', function ($sce) { return function (val) { return $sce.trustAsHtml(val); }; }]); 

Ecco il modello sovrascritto Angular Bootstrap 0.11.2 che utilizza questo filtro

 // 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: Ecco un’implementazione Plunker .

EDIT 2: man mano che questa risposta continua a ricevere colpi, la terrò aggiornata al meglio. Come riferimento Ecco il modello dal repository bootstrap angular-ui. Se questo cambia, il modello di override richiederà aggiornamenti corrispondenti e l’aggiunta degli attributi ng-bind-html=\"title | unsafe\" e ng-bind-html=\"content | unsafe\" per continuare a funzionare.

Per una conversazione aggiornata controlla il problema qui .

Usa la direttiva template-popover

Se si utilizza una versione di angular-ui uguale o superiore a 0.13.0 , l’opzione migliore è utilizzare la direttiva del popover-template . Ecco come usarlo:

   

NB: Non dimenticare le virgolette attorno al nome del modello in popover-template="'popover.html'" .

Vedi demo plunker


Come nota a margine, è ansible esternalizzare il modello di popover in un file html dedicato, invece di dichiararlo in un elemento

site stats