805 votes

Insérer du HTML en vue à l’aide de AngularJS

Est-il possible de créer un code HTML dans un Angulaires contrôleur et ce HTML affichée dans la vue?

Ceci vient d'un besoin d'une incohérence JSON blob dans une liste imbriquée d' id : value paires. Par conséquent, le code HTML est créé dans le contrôleur, et je suis maintenant à la recherche pour l'afficher.

J'ai créé un modèle de propriété, mais ne peut pas rendre cette vision, sans elle, juste l'impression de le HTML.


Mise à jour

Il semble que le problème se pose à partir angulaire rendu le HTML créé comme une chaîne de caractères entre guillemets. Essaie de trouver un moyen de contourner cela.

Exemple de contrôleur :

var SomeController = function () {

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

Exemple :

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

Donne :

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

1126voto

Luke Madera Points 3187

Swaff réponse était correcte, à compter de cette date, mais qui ne fonctionne plus; maintenant, vous utilisez:

Mise à JOUR 2: comme Sasha points, Angulaire 1.2, utilisez:

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

Mise à JOUR: comme Damax souligné, maintenant utiliser:

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

À L'ANCIENNE:

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

au lieu de

<div>{{expression}}</div>

https://github.com/angular/angular.js/blob/master/CHANGELOG.md (faites défiler vers le bas / de la recherche pour "ng-bind-html" dans cette page pour voir les détails de la modification)

AUSSI, cela nécessite désormais le "ngSanitize" module (j'ai accroché sur ce pendant un certain temps et je ne pouvais pas comprendre pourquoi ça ne fonctionnait pas et la documentation ne semble pas clair sur la façon d'inclure ce module). Il y a 2 étapes:

  1. inclure l'angular-sanitize.min.js de ressources, 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), comprennent ngSanitize, c'est à dire:
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

313voto

Katie Astrauskas Points 161
<p>Vous pouvez également créer un filtre comme suit :<pre><code></code></pre><p>Puis dans la vue</p><pre><code></code></pre></p>

121voto

MyName Points 530

Angular JS montre HTML dans la balise

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

Voici une copie:

Ok I found solution for this:

JS:

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

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

EDIT:

Voici la configuration:

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>

65voto

Pier-Luc Gendreau Points 2288

Heureusement, vous n'avez pas besoin de fantaisie filtres ou des méthodes dangereuses pour éviter ce message d'erreur. C'est la mise en œuvre complète correctement la sortie des balises HTML dans une vue dans l'intention et de manière sûre.

Le désinfecter module doivent être inclus après Angulaire:

<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 les marques dans une chaîne de caractères à partir d'un contrôleur, de la directive, etc:

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

Enfin, dans un modèle, il doit être sortie comme suit:

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

Qui va produire le résultat attendu: 42 est la réponse.

62voto

Damax Points 549
<p>J’ai essayé aujourd'hui, le seul moyen que j’ai trouvé cela a été<p><code></code></p></p>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X