Chèn HTML vào chế độ xem từ bộ điều khiển AngularJS

Có thể tạo một đoạn HTML trong bộ điều khiển AngularJS và hiển thị HTML này trong dạng xem không?

Điều này xuất phát từ yêu cầu biến một blob JSON không nhất quán thành một danh sách các id: valuecặp được lồng vào nhau . Do đó, HTML được tạo trong bộ điều khiển và bây giờ tôi đang tìm cách hiển thị nó.

Tôi đã tạo một thuộc tính mô hình, nhưng không thể hiển thị điều này trong chế độ xem mà không chỉ in HTML .

Cập nhật

Có vẻ như vấn đề phát sinh từ việc hiển thị góc đã tạo HTML dưới dạng một chuỗi trong dấu ngoặc kép. Sẽ cố gắng tìm cách xung quanh này.

Bộ điều khiển ví dụ:

var SomeController = function () {

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

Xem ví dụ:

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

Cung cấp:

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

Đối với Angular 1.x, sử dụng ng-bind-htmltrong HTML:

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

Tại thời điểm này, bạn sẽ gặp attempting to use an unsafe value in a safe contextlỗi, do đó bạn cần sử dụng ngSanitize hoặc $ sce để giải quyết vấn đề đó.

$ sce

Sử dụng $sce.trustAsHtml()trong bộ điều khiển để chuyển đổi chuỗi html.

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

ngSanitize

Có 2 bước:

1. bao gồm tài nguyên angular-sanitize.min.js, nghĩa là:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. Trong tệp js (trình điều khiển hoặc thường là app.js), bao gồm ngSanitize, nghĩa là:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Bạn cũng có thể tạo một bộ lọc như vậy:

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

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

Sau đó trong chế độ xem

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

Lưu ý : Bộ lọc này tin tưởng bất kỳ và tất cả html được truyền cho nó và có thể gây ra lỗ hổng XSS nếu các biến có đầu vào của người dùng được truyền cho nó.

Angular JS hiển thị HTML trong thẻ

Các giải pháp được cung cấp trong liên kết trên đã làm việc cho tôi, không có tùy chọn nào trong chủ đề này đã làm. Đối với bất cứ ai đang tìm kiếm điều tương tự với AngularJS phiên bản 1.2.9

Đây là một bản sao:

Ok tôi tìm thấy giải pháp cho việc này:

JS:

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

HTML:

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

BIÊN TẬP:

Đây là thiết lập:

Tệp tin:

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

    }]);

Tệp HTML:

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

May mắn thay, bạn không cần bất kỳ bộ lọc ưa thích hoặc phương pháp không an toàn để tránh thông báo lỗi đó. Đây là triển khai hoàn chỉnh để xuất đánh dấu HTML đúng cách trong chế độ xem theo cách dự định và an toàn.

Mô-đun khử trùng phải được đưa vào sau 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>

Sau đó, mô-đun phải được tải:

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

Điều này sẽ cho phép bạn bao gồm đánh dấu trong một chuỗi từ bộ điều khiển, chỉ thị, v.v .:

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

Cuối cùng, trong một mẫu, nó phải là đầu ra như vậy:

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

Mà sẽ tạo ra sản lượng dự kiến: 42 là câu trả lời .

Tôi đã thử ngày hôm nay, cách duy nhất tôi tìm thấy là

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

ng-bind-html-unsafe công việc ngắn hạn.

Đây là con đường ngắn nhất:

Tạo bộ lọc:

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

Và theo quan điểm của bạn:

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

PS Phương pháp này không yêu cầu bạn bao gồm ngSanitizemô-đun.

trên html

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

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

HOẶC LÀ

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

trên bộ điều khiển

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

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

cũng làm việc với $scope.comment.msg = $sce.trustAsHtml(html);

Tôi thấy rằng việc sử dụng ng-sanitize không cho phép tôi thêm ng-click trong html.

Để giải quyết điều này tôi đã thêm một chỉ thị. Như thế này:

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

Và đây là HTML:

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

Chúc may mắn.

Chỉ cần làm điều này bằng cách sử dụng ngBindHtml bằng cách làm theo các tài liệu góc (v1.4) ,

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

Đảm bảo bạn bao gồm ngSanitize trong phần phụ thuộc của mô-đun. Sau đó, nó nên hoạt động tốt.

Một giải pháp khác, rất giống với blrbr ngoại trừ sử dụng thuộc tính có phạm vi là:

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

Và sau đó

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

Lưu ý bạn có thể thay thế element.append()bằngelement.replaceWith()

có thêm một giải pháp cho vấn đề này bằng cách tạo thuộc tính hoặc chỉ thị mới theo góc.

sản phẩm-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>

hoặc là

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

hoặc là

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

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

bạn cũng có thể sử dụng ng-gộp .

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

bạn có thể sử dụng "ng-show" để hiển thị ẩn dữ liệu mẫu này.

Đây là giải pháp tạo bộ lọc như thế này

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

và áp dụng điều này như một bộ lọc cho ng-bind-html như

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

và cảm ơn Ruben Decrop

Sử dụng

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

và

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

Đối với điều đó, bạn cần đưa vào angular-sanitize.js, ví dụ như trong tệp html của bạn với

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

Đây là một bind-as-htmlchỉ thị đơn giản (và không an toàn) , không cần ngSanitize:

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

Lưu ý rằng điều này sẽ mở ra cho các vấn đề bảo mật, nếu ràng buộc nội dung không đáng tin cậy.

Sử dụng như vậy:

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

Ví dụ làm việc với ống dẫn để hiển thị html trong mẫu với Angular 4.

1.Crated ống thoát-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. Đăng ký đường ống đến app.module.ts

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

3. Sử dụng trong mẫu của bạn

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

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn trích

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

   Vui lòng thêm triển khai thích hợp cho getDivHtml trong tệp thành phần được liên kết.

Chỉ cần sử dụng đơn giản [innerHTML], như dưới đây:

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

Trước khi bạn cần sử dụng ng-bind-html...

Trong Angular 7 + ionic 4, nội dung Html có thể được hiển thị bằng cách sử dụng "[InternalHTML]":

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

Tôi hy vọng, điều này cũng sẽ giúp bạn. Cảm ơn.