web-dev-qa-db-fra.com

uib-popover-html n'acceptera pas ma chaîne html

J'utilise les versions 0.14.2 de angular-ui-bootstrap. Je n'ai pas pu afficher les retours à la ligne dans la fenêtre popover. J'utilise la directive popover-html et une chaîne telle que

Limite inférieure<br>Limite supérieure

Cela donne l'erreur suivante:

Lexer Error: Unexpected next character  at columns 41-41 [é] in expression [<div>Approchant des limites<br>Limite supérieure: 34:12<br>Limite inférieure: -34:12</div>].

J'ai essayé d'envelopper ma chaîne dans un appel $ sce.trustAsHtml, mais cela n'a rien changé.

Voici un plunker http://plnkr.co/edit/3JSly1anPBUiGyqBcsD1

angularjsangular-ui-bootstrap
8
Yugo Amaryl

Fonctionne pour moi en utilisant $sce.trustAsHtml comme ci-dessous.

Remarque: trustAsHtml indique à Angular de faire confiance au HTML, il ne doit donc être utilisé que si vous faites confiance au HTML, c’est-à-dire qu’il n’est pas fourni par l’utilisateur.

JS:

$scope.popoverContent = $sce.trustAsHtml('Line 1<br>Line2');

HTML:

<button popover-placement="right" uib-popover-html="popoverContent" type="button" class="btn btn-default">Popover</button>

Plunker mis à jour

Ou si votre contenu est dynamique et que vous avez besoin d'une fonction:

JS:

$scope.input = 'Line 1<br/>Line 2';

var trusted = {};

$scope.getPopoverContent = function(content) {
  return trusted[content] || (trusted[content] = $sce.trustAsHtml(content)); 
}

HTML:

<button popover-placement="right" uib-popover-html="getPopoverContent(input)" type="button" class="btn btn-default">Popover</button>

Plunker

(La raison pour laquelle la valeur renvoyée par trustAsHtml est mise en cache est que trustAsHtml renvoie toujours un nouvel objet, ce qui peut entraîner une boucle infinie $ digest)

18
sheilak

L'approche acceptée peut facilement conduire à une vulnérabilité de script intersite dans votre application. Vous ne devriez utiliser $sce.trustAsHtml que si vous faites explicitement confiance au contenu que vous souhaitez afficher. La documentation angular-bootstrap fait également allusion à cela:

L'utilisateur est responsable de la sécurité du contenu à mettre dans le DOM!

Une approche alternative et plus sûre consiste à utiliser uib-popover-template avec un modèle simple associé à ng-bind-html qui utilise automatiquement $sanitize pour purifier le code HTML.

HTML

<p uib-popover-template="myPopoverTemplateUrl" 
   popover-trigger="mouseenter" 
   popover-placement="top" 
   popover-append-to-body="true">
        Show a Popover on Hover
</p>
<script type="text/ng-template" id="myPopoverTemplate.html">
    <div>
         <p ng-bind-html="popoverContent"></p>
    </div>
</script>

JS

$scope.myPopoverTemplateUrl = "myPopoverTemplate.html";
$scope.popoverContent = "This is HTML <b> And will be sanitized."

Vous devez également vous assurer de déclarer ngSanitize dans votre application et d'inclure le script angular-sanitize.js. S'il vous plaît jeter un oeil à la plunker mis à jour pour référence.

Plunker mis à jour

3
Lucas Bader