IP Girl
  1. IP Girl
  3. Comment créer un popover bootstrap d’interface utilisateur AngularJS avec du contenu HTML?
Intereting Posts
ListView setOnItemClickListener ne fonctionne pas en ajoutant un bouton Comment faire une chaîne multi-lignes dans node.js? Retour à la ligne pour une étiquette dans Windows Forms Pouvez-vous installer un client TFS autonome qui n’a pas besoin de Visual Studio? Erreur de lien «référence indéfinie à` __gxx_personality_v0 ‘»et g ++ Faire correspondre les espaces mais pas les nouvelles lignes Comment sauter une compréhension de liste dans le débogueur de Python (pdb)? Comment lire un fichier texte de ressource incorporé Exception intermittente d’asp.net mvc: «Une méthode d’action publique ABC n’a pas pu être trouvée sur le contrôleur XYZ.» Android: la position de l’animation est réinitialisée après la fin Comment faire en sorte que la largeur du pourcentage div par rapport à la div parent et non à la fenêtre d’affichage EasyMock: Comment créer une maquette d’une classe générique sans avertissement? Créer un paquet avec fourmi Comment créer un vidage MongoDB de ma firebase database? Espaces de travail Eclipse: pour quoi et pourquoi?

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