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

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

Cela provient de l'obligation de transformer un blob JSON incohérent en une liste imbriquée de id: valuepaires. 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 .

Mise à jour

Il semble que le problème résulte du rendu angulaire du code HTML créé sous forme de chaîne entre guillemets. J'essaierai 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>

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

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

À ce stade, vous obtiendrez une attempting to use an unsafe value in a safe contexterreur, vous devez donc 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. 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), incluez ngSanitize, c'est-à-dire:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

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 tout le code HTML qui lui est transmis et pourrait présenter une vulnérabilité XSS si des variables avec une entrée utilisateur lui sont transmises.

Angular JS affiche HTML dans 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 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>

ÉDITER:

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>

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

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 du 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 sorti comme suit:

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

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

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

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

ng-bind-html-unsafe ne fonctionne plus.

C'est le chemin le plus court:

Créez un filtre:

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

Et selon vous:

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

PS Cette méthode ne vous oblige pas à inclure le ngSanitizemodule.

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

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.

Je viens de le faire en utilisant ngBindHtml en suivant des documents angulaires (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.

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 alors

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

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

il existe une autre solution à ce problème en utilisant la création de nouveaux attributs ou 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

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 ces données de modèle.

voici la solution faire un filtre comme celui-ci

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

et l'appliquer comme filtre au ng-bind-html comme

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

et merci à Ruben Decrop

Utilisation

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

Voici une bind-as-htmldirective simple (et peu 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 s'ouvrira pour des problèmes de sécurité, si vous liez du contenu non approuvé.

Utilisez comme ça:

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

Exemple de travail avec pipe pour afficher du HTML dans le modèle avec Angular 4.

1. tuyau évalué 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 tuyau sur 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">

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

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

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

Utilisation simple [innerHTML], comme ci-dessous:

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

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

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.