AngularJS denetleyicisinden görünüme HTML ekleme

Bir AngularJS denetleyicisinde bir HTML parçası oluşturmak ve bu HTML'nin görünümde gösterilmesi mümkün müdür ?

Bu, tutarsız bir JSON blobunu iç içe bir id: valueçiftler listesine dönüştürme gereksiniminden gelir . Bu nedenle HTML denetleyicide oluşturulur ve şimdi görüntülemek için arıyorum.

Bir model özelliği oluşturdum, ancak yalnızca HTML'yi yazdırmadan görünümde bunu oluşturamıyorum .

Güncelleme

Sorunun, oluşturulan HTML'yi tırnak içinde dize olarak açısal oluşturmasından kaynaklandığı görülmektedir. Bu konuda bir yol bulmaya çalışır.

Örnek kontrolör:

var SomeController = function () {

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

Örnek görünüm:

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

Verir:

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

Açısal 1.x ng-bind-htmliçin HTML'de kullanın :

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

Bu noktada bir attempting to use an unsafe value in a safe contexthata alırsınız, bu nedenle bunu çözmek için ngSanitize veya $ sce kullanmanız gerekir .

$ sce

$sce.trustAsHtml()Html dizesini dönüştürmek için denetleyicide kullanın .

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

ngSanitize

2 adım vardır:

1. angular-sanitize.min.js kaynağını ekleyin, yani:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. Bir js dosyasına (denetleyici veya genellikle app.js) ngSanitize ekleyin, yani:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Bunun gibi bir filtre de oluşturabilirsiniz:

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

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

Sonra görünümde

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

Not : Bu filtre, kendisine geçirilen tüm html'lere güvenir ve kullanıcı girdisine sahip değişkenler geçirilirse bir XSS güvenlik açığı sunabilir.

Açısal JS, etiketin içindeki HTML kodunu gösterir

Yukarıdaki bağlantıda sağlanan çözüm benim için çalıştı, bu konudaki seçeneklerin hiçbiri işe yaramadı. AngularJS sürüm 1.2.9 ile aynı şeyi arayan herkes için

İşte bir kopyası:

Tamam bunun için bir çözüm buldum:

JS:

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

HTML:

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

DÜZENLE:

İşte kurulum:

JS dosyası:

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

    }]);

HTML dosyası:

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

Neyse ki, bu hata mesajını önlemek için fantezi filtrelere veya güvenli olmayan yöntemlere ihtiyacınız yoktur. Bu, bir görünümde HTML biçimlendirmesini istenen ve güvenli bir şekilde düzgün şekilde çıktılamak için eksiksiz bir uygulamadır.

Dezenfektan modülü Açısal'dan sonra dahil edilmelidir:

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

Ardından, modül yüklenmelidir:

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

Bu, bir denetleyiciden, yönergeden vb. Bir dizeye biçimlendirme eklemenizi sağlar:

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

Son olarak, bir şablonda şöyle çıktı alınmalıdır:

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

Hangi beklenen çıktıyı üretecek: 42 olduğu cevabı .

Bugün denedim, bulmanın tek yolu şuydu

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

ng-bind-html-unsafe Artık çalışmıyor.

Bu en kısa yol:

Bir filtre oluşturun:

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

Ve sizce:

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

PS Bu yöntem, ngSanitizemodülü dahil etmenizi gerektirmez .

html'de

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

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

VEYA

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

kontrolörde

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

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

ile de çalışır $scope.comment.msg = $sce.trustAsHtml(html);

Ng-sanitize kullanmanın html'ye ng-click eklememe izin vermediğini buldum.

Bunu çözmek için bir direktif ekledim. Bunun gibi:

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

Ve bu HTML:

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

İyi şanslar.

Bunu açısal (v1.4) dokümanları izleyerek ngBindHtml kullanarak yaptık ,

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

Modül bağımlılıklarına ngSanitize eklediğinizden emin olun. O zaman iyi çalışmalı.

Kapsamlı bir öznitelik kullanmak dışında blrbr'lere çok benzeyen başka bir çözüm:

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

Ve sonra

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

Not element.append()ile değiştirebilirsinizelement.replaceWith()

açısal olarak yeni öznitelik veya yönergeler oluşturmayı kullanarak bu soruna bir çözüm daha var .

Ürün-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>

veya

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

veya

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

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

ng-include komutunu da kullanabilirsiniz .

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

bu şablon verilerini gizlemek için "ng-show" kullanabilirsiniz.

İşte çözüm böyle bir filtre yapmak

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

ve bunu ng-bind-html dosyasına bir filtre olarak uygulayın.

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

ve Ruben Decrop'a teşekkürler

kullanım

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

ve

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

Bunun için, angular-sanitize.jsörneğin html dosyasına

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

İşte basit (ve güvenli olmayan) bir bind-as-htmldirektif, aşağıdakilere ihtiyaç duymadan ngSanitize:

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

Güvenilmeyen içerik bağlanırsa bunun güvenlik sorunlarına yol açacağını unutmayın.

Şöyle kullanın:

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

Açısal 4 ile şablonda html görüntülemek için boru ile çalışma örneği.

1.Kablolu Boru Kaçış-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. Boruyu app.module.ts dosyasına kaydedin

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

3. Şablonunuzda kullanın

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

   Kod snippet'ini çalıştırSonuçları gizle

   Snippet'i genişlet

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

   Lütfen related component.ts dosyasına getDivHtml için uygun uygulamaları ekleyin.

[innerHTML]Aşağıdaki gibi sadece basit kullanım :

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

Kullanmanız gerekmeden önce ng-bind-html...

Açısal 7 + iyonik 4'te, Html içerikleri "[innerHTML]" kullanılarak gösterilebilir:

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

Umarım bu da size yardımcı olacaktır. Teşekkürler.