web-dev-qa-db-fra.com

analyser html à l'intérieur de ng-bind en utilisant angularJS

J'ai des problèmes avec angularJs. Mon application demande des données au serveur et l'une des valeurs des données renvoyées par le serveur est une chaîne html. Je le lie dans mon modèle angular comme celui-ci

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

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

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

ce n'est pas ce que je veux.

quelqu'un sait ce que je peux faire pour analyser le html dans la transclusion

javascriptangularjshtml-parsing
38
Edgar Martinez

Vous souhaitez utiliser ng-bind-html et ng-bind-html-unsafe pour ce genre de but.

Les exemples sont affichés ici

39
Tosh

Comme ng-bind-html-unsafe est obsolète, 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 à votre avis:

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

N'oubliez pas d'injecter $ sce:

AppObj.controller('MyController', function($scope, $sce) {
    //your code here 
});
18
Mher Aghabalyan

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

Voir: http://docs.angularjs.org/api/ng.$compile

Enfin, pour le moment, la dernière version d'angularJS (release candidate 1.2.0) n'a pas de ng-bind-html-unsafe directive. Je vous encourage donc vraiment à envisager cette option avant toute future mise à jour de votre application. (ng-bind-html-unsafe peut/ne fonctionnera plus ...)

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

8
Pierre Broucz