Masukkan HTML ke tampilan dari pengontrol AngularJS

Apakah mungkin untuk membuat fragmen HTML di pengontrol AngularJS dan menampilkan HTML ini dalam tampilan?

Ini berasal dari persyaratan untuk mengubah gumpalan JSON yang tidak konsisten menjadi daftar id: valuepasangan bersarang . Karena itu HTML dibuat di controller dan sekarang saya ingin menampilkannya.

Saya telah membuat properti model, tetapi tidak dapat membuat ini dalam tampilan tanpa hanya mencetak HTML .

Memperbarui

Tampaknya masalah muncul dari rendering sudut HTML yang dibuat sebagai string dalam tanda kutip. Akan berusaha mencari jalan keluar.

Pengontrol contoh:

var SomeController = function () {

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

Contoh tampilan:

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

Memberi:

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

Untuk Angular 1.x, gunakan ng-bind-htmldalam HTML:

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

Pada titik ini Anda akan mendapatkan attempting to use an unsafe value in a safe contextkesalahan sehingga Anda perlu menggunakan ngSanitize atau $ sce untuk menyelesaikannya.

$ sce

Gunakan $sce.trustAsHtml()di pengontrol untuk mengonversi string html.

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

ng Sanitasi

Ada 2 langkah:

1. termasuk sumber daya angular-sanitize.min.js, yaitu:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. Dalam file js (controller atau biasanya app.js), sertakan ngSanitize, yaitu:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Anda juga dapat membuat filter seperti:

var app = angular.module("demoApp", ['ngResource']);

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

Lalu dalam tampilan

<div ng-bind-html="trusted_html_variable | trust"></div>

Catatan : Filter ini mempercayai setiap dan semua html yang diteruskan ke sana, dan bisa menyajikan kerentanan XSS jika variabel dengan input pengguna diteruskan ke sana.

Angular JS menunjukkan HTML di dalam tag

Solusi yang disediakan di tautan di atas bekerja untuk saya, tidak ada opsi di utas ini yang berfungsi. Bagi siapa pun yang mencari hal yang sama dengan AngularJS versi 1.2.9

Ini salinannya:

Ok saya menemukan solusi untuk ini:

JS:

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

HTML:

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

EDIT:

Inilah pengaturannya:

File 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>'; 

    }]);

File HTML:

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>

Untungnya, Anda tidak memerlukan filter mewah atau metode tidak aman untuk menghindari pesan kesalahan itu. Ini adalah implementasi lengkap untuk menampilkan markup HTML dengan benar dalam tampilan dengan cara yang dimaksudkan dan aman.

Modul sanitasi harus dimasukkan setelah 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>

Kemudian, modul harus dimuat:

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

Ini akan memungkinkan Anda untuk memasukkan markup dalam string dari pengontrol, direktif, dll:

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

Akhirnya, dalam templat, harus berupa output seperti:

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

Yang akan menghasilkan output yang diharapkan: 42 adalah jawabannya .

Saya sudah mencoba hari ini, satu-satunya cara saya temukan adalah ini

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

ng-bind-html-unsafe tidak lagi berfungsi.

Ini cara terpendek:

Buat filter:

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

Dan menurut Anda:

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

PS Metode ini tidak mengharuskan Anda untuk memasukkan ngSanitizemodul.

di html

<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

ATAU

<div ng-bind-html="myCtrl.comment.msg"></div

pada pengontrol

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

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

bekerja juga dengan $scope.comment.msg = $sce.trustAsHtml(html);

Saya menemukan bahwa menggunakan ng-sanitize tidak memungkinkan saya untuk menambahkan ng-klik di html.

Untuk mengatasi ini saya menambahkan arahan. Seperti ini:

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

Dan ini adalah HTML:

<htmldiv content="theContent"></htmldiv>

Semoga berhasil.

Baru saja melakukan ini menggunakan ngBindHtml dengan mengikuti sudut (v1.4) dokumen ,

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

Pastikan Anda memasukkan ngSanitize dalam dependensi modul. Maka itu harus bekerja dengan baik.

Solusi lain, sangat mirip dengan blrbr kecuali menggunakan atribut scoped adalah:

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

Lalu

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

Catatan Anda dapat mengganti element.append()denganelement.replaceWith()

ada satu solusi lagi untuk masalah ini menggunakan menciptakan atribut atau arahan baru dalam sudut.

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

atau

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

atau

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

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

Anda juga dapat menggunakan ng-include .

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

Anda dapat menggunakan "ng-show" untuk memperlihatkan sembunyikan data templat ini.

ini solusinya buat filter seperti ini

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

dan terapkan ini sebagai filter ke ng-bind-html like

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

dan terima kasih kepada Ruben Decrop

Menggunakan

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

dan

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

Untuk itu, Anda perlu memasukkan angular-sanitize.js, misalnya dalam file html Anda dengan

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

Berikut adalah bind-as-htmlarahan sederhana (dan tidak aman) , tanpa perlu ngSanitize:

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

Perhatikan bahwa ini akan terbuka untuk masalah keamanan, jika mengikat konten yang tidak dipercaya.

Gunakan seperti ini:

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

Contoh kerja dengan pipa untuk menampilkan html di templat dengan Angular 4.

1.Crated Pipe 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. Daftarkan pipa ke app.module.ts

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

3. Gunakan di template Anda

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

   Jalankan cuplikan kodeSembunyikan hasil

   Luaskan cuplikan

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

   Silakan tambahkan implementasi yang sesuai untuk getDivHtml di file component.ts terkait.

Cukup gunakan sederhana [innerHTML], seperti di bawah ini:

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

Sebelum Anda perlu menggunakan ng-bind-html...

Dalam Angular 7 + ionic 4, konten Html dapat ditampilkan dengan menggunakan "[innerHTML]":

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

Saya harap, ini juga akan membantu Anda. Terima kasih.