parse html dans ng-bind en utilisant angularJS [dupliquer]

cette question a déjà une réponse ici:

j'ai un problème avec les angularJs. Mon application demande quelques données du serveur et une des valeurs des données retournées du serveur est un chaîne de caractères html. Je l'attache dans mon gabarit angulaire comme ceci

<div>{{{item.location_icons}}</div>

mais comme vous pouvez vous attendre ce que je vois n'est pas les images des icônes mais le markup en gros, le truc dans la div ressemble à

 "<i class='my-icon-class'/>"

qui n'est pas ce que je veux.

n'importe qui sait ce que je peux faire pour Parser le html dans la transclusion

36
demandé sur Damjan Pavlica 2013-02-15 09:31:15

3 réponses

vous voulez utiliser ng-bind-html et ng-bind-html-unsafe pour ce genre d'utilisation.

les exemples sont montrés ici

37
répondu Tosh 2018-02-28 13:43:04

comme ng-bind-html-unsafe est déprécié, vous pouvez utiliser ce code à la place.

vous devez créer une fonction à l'intérieur de votre contrôleur:

$scope.toTrustedHTML = function( html ){
    return $sce.trustAsHtml( html );
}

et utilisez quelque chose comme ceci dans votre point de vue:

<span ng-bind-html='toTrustedHTML( myHTMLstring )'></span>

N'oubliez pas d'injecter $sce:

AppObj.controller('MyController', function($scope, $sce) {
    //your code here 
});
17
répondu Mher Aghabalyan 2015-02-01 14:56:24

une meilleure façon est d'utiliser $compile au lieu de ng-bind-html-unsafe .

voir: http://docs.angularjs.org/api/ng.$compiler

enfin, à l'heure actuelle, la dernière version d'angularJS (release candidate 1.2.0) n'a pas de directive ng-bind-html-unsafe . Donc je vous encourage vraiment à considérer cette option avant toute future mise à jour de votre application. ( ng-bind-html-unsafe peut/ne fonctionne plus...)

http://code.angularjs.org/1.2.0rc1/docs/api/ng.directive:ngBindHtml

8
répondu Pierre Broucz 2013-08-14 13:41:42