Pertanyaan Masukkan HTML ke tampilan


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

Ini berasal dari persyaratan untuk mengubah gumpalan JSON yang tidak konsisten menjadi daftar bertumpuk id : value pasangan. Oleh karena itu HTML dibuat di controller dan saya sekarang ingin menampilkannya.

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


Memperbarui

Tampaknya masalah muncul dari angular rendering yang dibuat HTML sebagai string dalam tanda kutip. Akan berusaha mencari jalan di sekitar ini.

Pengontrol contoh:

var SomeController = function () {

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

Tampilan contoh:

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

Memberi:

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

752
2018-02-21 17:12


asal


Jawaban:


Untuk 1.x Sudut, gunakan ng-bind-html dalam HTML:

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

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

$ sce

Menggunakan $sce.trustAsHtml() di controller untuk mengubah string html.

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

ngSanitize

Ada 2 langkah:

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

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


1070
2018-06-10 19:39



Anda juga dapat membuat filter seperti ini:

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

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

Kemudian dalam tampilan

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

Catatan: Filter ini mempercayai setiap dan semua html dilewatkan ke sana, dan dapat menampilkan kerentanan XSS jika variabel dengan masukan pengguna dilewatkan ke sana.


302
2017-08-26 18:52



JS Sudut menampilkan HTML di dalam tag 

Solusi yang disediakan di tautan di atas berfungsi untuk saya, tidak ada opsi di rangkaian ini. Untuk siapa saja 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:

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

114
2018-03-25 16:25



Untungnya, Anda tidak memerlukan filter mewah atau metode tidak aman untuk menghindari pesan kesalahan itu. Ini adalah implementasi lengkap untuk menghasilkan 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 menyertakan markup dalam string dari pengontrol, direktif, dll:

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

Akhirnya, dalam template, itu harus menjadi output seperti ini:

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

Yang akan menghasilkan output yang diharapkan: 42 adalah menjawab.


62
2017-10-16 18:32



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

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


60
2017-07-24 22:49



ng-bind-html-unsafe tidak lagi berfungsi.

Ini adalah cara terpendek:

Buat filter:

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

Dan dalam pandangan Anda:

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

P.S. Metode ini tidak mengharuskan Anda memasukkan ngSanitize modul.


49
2017-08-23 02:45



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 kontroler

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

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

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


24
2017-12-17 17:20



Saya menemukan bahwa menggunakan ng-sanitize tidak memungkinkan saya 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.


9
2017-09-22 21:34



Pada Angular 4, inilah cara yang sekarang berfungsi:

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

Diambil dari pertanyaan ini sini.


8
2018-06-09 12:47



Hanya melakukan ini menggunakan ngBindHtml dengan mengikuti angular (v1.4) dokumen,

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

Pastikan Anda menyertakan ngSanitize dalam dependensi modul. Maka itu harus berfungsi dengan baik.


6
2018-03-19 02:41