Insérer HTML dans la vue

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

il s'agit d'une exigence de transformer un 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é model, mais je ne peux pas la rendre dans la vue sans qu'elle n'imprime simplement le HTML.


mise à Jour

il semble que le problème découle du rendu angulaire du 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 de vue:

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

donne:

<div>
    "<ul><li>render me please</li></ul>"
</div>
757
demandé sur Uwe Keim 2012-02-21 21:12:12
la source

18 ответов

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

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

à ce point vous obtiendriez une erreur attempting to use an unsafe value in a safe context donc vous devez utiliser ngSanitize ou $sce pour résoudre cela.

$ 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 le angulaires-à désinfecter.min.js de ressources, c'est à dire:

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

  2. Dans un fichier js (ou contrôleur général app.js), y compris ngSanitize, i.e.:

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

1074
répondu Luke Madera 2015-12-14 12:25:03
la source

vous pouvez aussi 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>

Note : ce filtre fait confiance à tout html qui lui est passé, et pourrait présenter une vulnérabilité XSS si les variables avec l'entrée de l'utilisateur lui sont passées.

302
répondu Katie Astrauskas 2016-08-18 22:04:36
la source

montre html dans L'étiquette

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

voici une copie:

Ok j'ai trouvé la solution pour ceci:

JS:

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

HTML:

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

EDIT:

voici le montage:

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
répondu anpatel 2017-05-23 14:47:31
la source

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 afficher correctement le balisage HTML dans une vue de la manière prévue et sûre.

le module d'assainissement 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 markup 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 produit comme ceci:

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

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

62
répondu Pier-Luc Gendreau 2014-10-16 22:32:13
la source

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

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

60
répondu Damax 2012-07-25 02:49:49
la source

ng-bind-html-unsafe ne fonctionne plus.

C'est le chemin 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 .

50
répondu Bidhan Bhattarai 2015-08-23 05:53:51
la source

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

contrôleur

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

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

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

24
répondu Sotos 2013-12-17 21:41:37
la source

à partir de L'angle 4, c'est la façon qui fonctionne maintenant:

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

tiré de cette question ici.

10
répondu Garth 2017-06-09 15:47:05
la source

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.

9
répondu Matt 2014-09-23 01:34:09
la source

vient de le faire en utilisant ngBindHtml en suivant angulaire(v1.4) docs ,

<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, il devrait fonctionner correctement.

6
répondu Henry Neo 2015-03-19 05:41:00
la source

une autre solution, très similaire à celle de blrbr, sauf qu'elle utilise un attribut scopé, 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 ensuite

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

Note Vous pouvez remplacer element.append() par element.replaceWith()

4
répondu jmb.mage 2014-10-01 19:12:26
la source

il y a une autre solution pour ce problème en créant un nouvel attribut ou des directives en angle.

produit-spécifications.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"
};
});

de l'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

3
répondu yugi 2014-11-18 08:47:16
la source

vous pouvez également utiliser ng-inclure .

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

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

3
répondu Vikash Sharma 2016-03-31 07:47:44
la source

voir les réponses que j'ai postées pour vous dans ces deux endroits:

http://forum.ionicframework.com/t/eval-json-data-as-html/1455/6

http://codepen.io/calendee/pen/DKhbc

2
répondu Justin Noel 2014-02-28 22:56:08
la source

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>
1
répondu Patricia Beier 2016-10-23 02:51:34
la source

Voici une simple (et dangereuse) bind-as-html directive, sans la nécessité de ngSanitize :

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

notez que cela s'ouvrira pour les questions de sécurité, si le contenu non fiable contraignant.

utiliser comme suit:

<div bind-as-html="someHtmlInScope"></div>
0
répondu 2017-12-26 18:10:44
la source

voici la solution faites un filtre comme celui-ci

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

et l'appliquer comme un filtre à la ng-bind-html comme

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

et merci à Ruben Decrop

0
répondu bahri noredine 2017-12-28 02:29:04
la source

exemple de travail avec pipe pour afficher html dans le modèle avec angle 4.

1.Echappement de Pipe en caisson-html.tuyau.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. Registre tuyau d'application.module.ts

 import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
    declarations: [...,EscapeHtmlPipe]
  1. utiliser dans votre modèle

        <div class="demoPipe"  [innerHtml]="getDivHtml(obj.header) | keepHtml">
  2. getDivHtml() { //can return html as per requirement}

    s'il Vous Plaît ajouter mise en œuvre appropriée pour getDivHtml dans la composante associée.fichier ts.

-1
répondu Sagar Misal 2018-01-16 12:24:28
la source