Insérer du HTML dans la vue à partir du contrôleur AngularJS

Question

Est-il possible de créer un HTML dans un contrôleur AngularJS et faire apparaître ce 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 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 parviens pas à la rendre dans la vue sans qu'elle n'imprime simplement l'adresse de l'utilisateur. HTML .

---

Mise à jour

Il semble que le problème vienne du fait qu'Angular rende le HTML créé sous la forme d'une chaîne entre guillemets. Je vais essayer de trouver un moyen de contourner ce problème.

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>

Answer 1

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

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

À ce stade, vous obtiendrez un attempting to use an unsafe value in a safe context Vous devez donc soit utiliser ngSanitize ou $sce pour résoudre ce problème.

$sce

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

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

ngSanitize

Il y a deux étapes :

1. inclure la ressource angular-sanitize.min.js, c'est-à-dire :

   <script src="lib/angular/angular-sanitize.min.js"></script>

2. Dans un fichier js (contrôleur ou généralement app.js), inclure ngSanitize, c'est-à-dire :

   angular.module('myApp', ['myApp.filters', 'myApp.services', 
       'myApp.directives', 'ngSanitize'])

Answer 2

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

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>

Note : Ce filtre fait confiance à tout le html qui lui est passé, et pourrait présenter une vulnérabilité XSS si des variables avec des entrées utilisateur lui sont passées.

Answer 3

Angular JS affiche le HTML à l'intérieur de la balise

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

Voici une copie :

Ok, j'ai trouvé une solution à ce problème :

JS :

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

HTML :

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

EDIT :

Voici l'installation :

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>

Answer 4

Heureusement, vous n'avez pas besoin de filtres sophistiqués ou de méthodes non sécurisées pour éviter ce message d'erreur. Il s'agit de l'implémentation complète permettant d'afficher correctement le balisage HTML dans une vue, de la manière prévue et sûre.

Le module sanitize 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 des balises dans une chaîne de caractères à 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 suit :

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

Ce qui produira le résultat attendu : 42 est le réponse .

Answer 5

J'ai essayé aujourd'hui, le seul moyen que j'ai trouvé est celui-ci

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