Question Insérer du code HTML dans la vue


Est-il possible de créer un fragment HTML dans un contrôleur AngularJS et d'afficher ce code HTML dans la vue?

Cela vient d'une exigence de transformer un blob JSON incohérent en une liste imbriquée de id : value paires. Par conséquent, le code HTML est créé dans le contrôleur et je cherche maintenant à l'afficher.

J'ai créé une propriété de modèle, mais je ne peux pas la rendre dans la vue sans imprimer simplement le code HTML.


Mettre à jour

Il semble que le problème provient du rendu angulaire du HTML créé sous la forme d'une chaîne entre guillemets. Je vais essayer de trouver un moyen de contourner cela.

Exemple de contrôleur:

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

Exemple de vue:

<div ng:bind="customHtml"></div>

Donne:

<div>
    "<ul><li>render me please</li></ul>"
</div>

752
2018-02-21 17:12


origine


Réponses:


Pour Angular 1.x, utilisez ng-bind-html dans le HTML:

<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>

À ce stade, vous obtiendriez un attempting to use an unsafe value in a safe context erreur, donc vous devez soit utiliser ngSanitize ou $ sce pour résoudre cela.

$ sce

Utilisation $sce.trustAsHtml() dans le contrôleur pour convertir la chaîne html.

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize

Il y a 2 étapes:

  1. inclure la ressource angular-sanitize.min.js, à savoir:
    <script src="lib/angular/angular-sanitize.min.js"></script>

  2. Dans un fichier js (contrôleur ou habituellement app.js), incluez ngSanitize, par exemple:
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])


1070
2018-06-10 19:39



Vous pouvez également créer un filtre comme ceci:

var app = angular.module("demoApp", ['ngResource']);

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

Puis dans la vue

<div ng-bind-html="trusted_html_variable | trust"></div>

Remarque: Ce filtre approuve tous les fichiers html qui lui sont passés et peut présenter une vulnérabilité XSS si des variables avec des entrées utilisateur lui sont transmises.


302
2017-08-26 18:52



Angular JS affiche du code HTML dans le tag 

La solution fournie dans le lien ci-dessus a fonctionné pour moi, aucune des options sur ce fil n'a fait. Pour ceux qui recherchent la même chose avec AngularJS version 1.2.9

Voici une copie:

Ok j'ai trouvé une solution pour ça:

JS:

$scope.renderHtml = function(html_code)
{
    return $sce.trustAsHtml(html_code);
};

HTML:

<p ng-bind-html="renderHtml(value.button)"></p>

MODIFIER:

Voici la mise en place:

Fichier JS:

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }]);

Fichier HTML:

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>

114
2018-03-25 16:25



Heureusement, vous n'avez pas besoin de filtres sophistiqués ou de méthodes dangereuses pour éviter ce message d'erreur. C'est l'implémentation complète pour afficher correctement le balisage HTML dans une vue de la manière prévue et en toute sécurité.

Le module de désinfection doit être inclus après Angular:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

Ensuite, le module doit être chargé:

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

Cela vous permettra d'inclure un balisage dans une chaîne à partir d'un contrôleur, d'une directive, etc.

scope.message = "<strong>42</strong> is the <em>answer</em>.";

Enfin, dans un modèle, il doit être édité comme ceci:

<p ng-bind-html="message"></p>

Ce qui produira la sortie attendue: 42 est le répondre.


62
2017-10-16 18:32



J'ai essayé aujourd'hui, la seule façon que j'ai trouvée était

<div ng-bind-html-unsafe="expression"></div>


60
2017-07-24 22:49



ng-bind-html-unsafe ne fonctionne plus.

C'est le moyen le plus court:

Créer un filtre:

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

Et à votre avis:

<div ng-bind-html="customHtml | unsafe"></div>

P.S. Cette méthode ne vous oblige pas à inclure le ngSanitize module.


49
2017-08-23 02:45



sur le html

<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

OU

<div ng-bind-html="myCtrl.comment.msg"></div

sur le contrôleur

mySceApp.controller("myAppController", function myAppController( $sce) {

this.myCtrl.comment.msg = $sce.trustAsHtml(html);

travaille aussi avec $scope.comment.msg = $sce.trustAsHtml(html);


24
2017-12-17 17:20



J'ai trouvé que l'utilisation de ng-sanitize ne me permettait pas d'ajouter ng-click dans le HTML.

Pour résoudre ce problème, j'ai ajouté une directive. Comme ça:

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

Et voici le HTML:

<htmldiv content="theContent"></htmldiv>

Bonne chance.


9
2017-09-22 21:34