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 .
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