Yocker
  1. Yocker
  3. Come posso creare un popover bootstrap con interfaccia utente AngularJS con contenuto HTML?
Intereting Posts
Area combinata di cerchi sovrapposti Formattazione di posizioni decimali in R Pivot SQL di Poor Man. Elenca le domande come colonne e risposte per utente in una riga Perché passare per riferimento const anziché per valore? Immagine convertita in Base64 Contare gli elementi da un object IEnumerable senza iterare? Come accedere a JMX Spring-boot da remoto Come GetBytes () in C # con la codifica UTF8 con BOM? Perché Enumerable.All restituisce true per una sequenza vuota? Qual è la differenza tra x: Reference e ElementName? Come accedere a questa “mappa” corretta all’interno: ReactJS Come si rimuove completamente l’installazione di Ionic e Cordova da mac? Modo corretto per associare un radiobutton mvc3 a un modello Ottieni risposta dal file PHP utilizzando AJAX piano di coordinate rotanti per dati e testo in Java

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