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

Question

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

Cela vient de la nécessité de transformer un objet blob JSON incohérent en une liste imbriquée de paires id : value.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 peux pas la rendre dans la vue sans simplement imprimer le HTML.

---

Mettre à jour

Il semble que le problème provient du rendu angulaire du HTML créé sous forme de 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 une erreur attempting to use an unsafe value in a safe context donc vous devez 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 2 étapes:

1. inclut 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), incluez ngSanitize, c'est-à-dire:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Answer 2

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 fait confiance à tous les fichiers HTML qui lui sont transmis et peut présenter une vulnérabilité XSS si des variables avec des entrées utilisateur lui sont transmises.

Answer 3

Angular JS affiche du HTML dans la balise

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

En 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 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>

Answer 4

Heureusement, vous n'avez pas besoin de filtres sophistiqués ou de méthodes peu sûres pour éviter ce message d'erreur.Il s'agit de l'implémentation complète pour générer 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 du balisage dans une chaîne 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 affiché comme ceci:

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

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

Answer 5

J'ai essayé aujourd'hui, le seul moyen que j'ai trouvé était ceci

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

Answer 6

ng-bind-html-unsafe ne fonctionne plus.

Voici 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 module ngSanitize.

Answer 7

sur 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);

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

Answer 8

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 ceci:

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.

Answer 9

Je viens de faire cela en utilisant ngBindHtml en suivant les docs angular (v1.4) ,

<div ng-bind-html="expression"></div> 
and expression can be "<ul><li>render me please</li></ul>"

Assurez-vous d'inclure ngSanitize dans les dépendances du module. Ensuite, cela devrait fonctionner correctement.

Answer 10

Une autre solution, très similaire à celle de blrbr, sauf en utilisant un attribut de portée est:

angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
    return {
      restrict: 'E',
      scope: {
        html: '='
      },
      link: function postLink(scope, element, attrs) {

          function appendHtml() {
              if(scope.html) {
                  var newElement = angular.element(scope.html);
                  $compile(newElement)(scope);
                  element.append(newElement);
              }
          }

          scope.$watch(function() { return scope.html }, appendHtml);
      }
    };
  }]);

Et puis

<render-html html="htmlAsString"></render-html>

Notez que vous pouvez remplacer element.append() par element.replaceWith()

Answer 11

Il existe une autre solution à ce problème en créant un nouvel attribut ou des directives en angulaire.

<₹product-specs.html

 <h4>Specs</h4>
        <ul class="list-unstyled">
          <li>
            <strong>Shine</strong>
            : {{product.shine}}</li>
          <li>
            <strong>Faces</strong>
            : {{product.faces}}</li>
          <li>
            <strong>Rarity</strong>
            : {{product.rarity}}</li>
          <li>
            <strong>Color</strong>
            : {{product.color}}</li>
        </ul>

<₹app.js

 (function() {
var app = angular.module('gemStore', []);    
app.directive("     <div ng-show="tab.isSet(2)" product-specs>", function() {
return {
  restrict: 'E',
  templateUrl: "product-specs.html"
};
});

<₹index.html

 <div>
 <product-specs>  </product-specs>//it will load product-specs.html file here.
 </div>

ou

<div  product-specs>//it will add product-specs.html file 

ou

<div ng-include="product-description.html"></div>

https://docs.angularjs.org/guide/directive

Answer 12

vous pouvez également utiliser ng-include .

<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>

vous pouvez utiliser "ng-show" pour afficher masquer les données de ce modèle.

Answer 13

Utiliser

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

et

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

Pour cela, vous devez inclure angular-sanitize.js, par exemple dans votre fichier html avec

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

Answer 14

voici la solution pour créer un filtre comme celui-ci

.filter('trusted',
   function($sce) {
     return function(ss) {
       return $sce.trustAsHtml(ss)
     };
   }
)

et appliquez-le comme filtre au ng-bind-html comme

<div ng-bind-html="code | trusted">

et merci à Ruben Decrop

Answer 15

Voici une directive bind-as-html simple (et non sûre), sans avoir besoin de ngSanitize:

myModule.directive('bindAsHtml', function () {
    return {
        link: function (scope, element, attributes) {
            element.html(scope.$eval(attributes.bindAsHtml));
        }
    };
});

Notez que cela entraînera des problèmes de sécurité, en cas de liaison de contenu non approuvé.

Utilisez comme ceci:

<div bind-as-html="someHtmlInScope"></div>

Answer 16

Exemple de travail avec pipe pour afficher du HTML dans un template avec Angular 4.

1. Pipe classée escape-html.pipe.ts

`

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({name : 'keepHtml', pure : false})
export class EscapeHtmlPipe implements PipeTransform{
 constructor(private sanitizer : DomSanitizer){
 }
 transform(content){
  return this.sanitizer.bypassSecurityTrustHtml(content);
 }
}

` 2. Enregistrez le tube dans app.module.ts

 import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
    declarations: [...,EscapeHtmlPipe]

3. Utiliser dans votre modèle

       <div class="demoPipe"  [innerHtml]="getDivHtml(obj.header) | keepHtml">

4. getDivHtml() { //can return html as per requirement}

   Veuillez ajouter l'implémentation appropriée pour getDivHtml dans le fichier component.ts associé.

Answer 17

Utilisez simplement [innerHTML], comme ci-dessous:

<div [innerHTML]="htmlString"></div>

Avant de devoir utiliser ng-bind-html ...

Answer 18

Dans Angular 7 + ionic 4, le contenu Html peut être affiché en utilisant "[innerHTML]":

<div [innerHTML]="htmlContent"></div>

J'espère que cela vous aidera également.Merci.