web-dev-qa-db-fra.com

Comment sortir du HTML avec le template AngularJS?

<h1>{{ revision.title }}</h1>

<div ng-bind-html="revision.content"></div>

Le titre est correct, mais pas le contenu. Il contient du code HTML et j'obtiens le message d'erreur suivant: Attempting to use an unsafe value in a safe context., décrit comme suit: http://docs.angularjs.org/error/ $ sce: non sécurisé et c'est bien, mais comment puis-je afficher le contenu car il y aura du code HTML dans celui-ci et je dois donc le régler sur {{ revision.content | safe }} ou smthn. Quelle est la bonne manière?

MODIFIER:

AngularJS version: 1.2

javascripthtmltemplatesangularjsview
28
Xeen

Donc, la solution est la suivante:

incluez angular-sanitize.min.js à partir de http://code.angularjs.org/ et incluez-le dans votre module:

var app = angular.module('app', ['ngSanitize']);

et alors vous êtes libre d'utiliser ng-bind-html

110
Xeen

J'ai créé une directive ng-html qui fait la même chose que ng-bind-html-unsafe. Cependant, je suggère fortement que vous ne l'utilisez qu'avec prudence. Cela pourrait facilement ouvrir votre site à des attaques malveillantes. Alors, sachez ce que vous faites avant de le mettre en œuvre:

.directive('ngHtml', ['$compile', function($compile) {
    return function(scope, elem, attrs) {
        if(attrs.ngHtml){
            elem.html(scope.$eval(attrs.ngHtml));
            $compile(elem.contents())(scope);
        }
        scope.$watch(attrs.ngHtml, function(newValue, oldValue) {
            if (newValue && newValue !== oldValue) {
                elem.html(newValue);
                $compile(elem.contents())(scope);
            }
        });
    };
}]);

Et puis vous l'utiliseriez comme:

<div ng-html="revision.content"></div>

J'espère que cela pourra aider.

3
tennisgent

Je sais que c'est une question plus ancienne, mais vous pouvez également faire confiance à la valeur en utilisant $sce dans votre contrôleur:

$scope.revision.content = $sce.trustAsHtml($scope.revision.content);

Après cela, ng-bind-html fonctionnera.

3
Felix Engelmann

Quelle version utilisez-vous? Si vous utilisez moins de 1.2, vous pouvez essayer ngBindHtmlUnsafe

2
Michael B

selon le document officiel AngularJs Doc environ ngBindHtml vous devez injecter ngSanitize dans les dépendances de votre application

Evalue l'expression et insère le code HTML résultant dans le fichier élément de manière sécurisée. Par défaut, le contenu HTML résultant sera être désinfecté à l’aide du service $ sanitize. Pour utiliser ceci fonctionnalité, assurez-vous que $ sanitize est disponible, par exemple, avant y compris ngSanitize dans les dépendances de votre module (pas dans le noyau Angular). Afin d'utiliser ngSanitize dans les dépendances de votre module, vous devez inclure "angular-sanitize.js" dans votre application.

Ensuite, vous pouvez installer le module ngSanitize par ces moyens:

1 - en utilisant bower

bower install --save angular-sanitize

2 - en utilisant npm

npm install --save angular-sanitize

3 - manuellement en téléchargeant le fichier angular-sanitize.js de code.angularjs.org chemin qui inclut toutes les catégories de fichiers angularJs par numéro de version like @Xeen answer

En savoir plus sur le module install ngSanitize de Référentiel github officiel angularJs pour installer angular-sanitize

0
ahmed hamdy