javascript - एचटीएमएल को देखने में डालें




angularjs escaping (12)

क्या एंगुलरजेएस नियंत्रक में एक HTML खंड बनाना संभव है और क्या यह HTML दृश्य में दिखाया गया है?

यह id : value की एक नेस्टेड सूची में एक असंगत JSON ब्लॉब को चालू करने की आवश्यकता से आता है id : value जोड़े। इसलिए एचटीएमएल नियंत्रक में बनाया गया है और अब मैं इसे प्रदर्शित करने के लिए देख रहा हूँ।

मैंने एक मॉडल प्रॉपर्टी बनाई है, लेकिन इसे HTML में प्रिंट किए बिना दृश्य में प्रस्तुत नहीं किया जा सकता है।

अद्यतन करें

ऐसा प्रतीत होता है कि समस्या उत्पन्न HTML को उद्धरण के भीतर एक स्ट्रिंग के रूप में प्रस्तुत करने वाले कोणीय से उत्पन्न होती है। इस के आसपास एक रास्ता खोजने का प्रयास करेंगे।

उदाहरण नियंत्रक:

var SomeController = function () {

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

उदाहरण देखें:

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

देता है:

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

आप एनजी-शामिल भी उपयोग कर सकते हैं

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

आप इस टेम्पलेट डेटा को छिपाने के लिए "एनजी-शो" का उपयोग कर सकते हैं।


आप इस प्रकार एक फ़िल्टर भी बना सकते हैं:

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

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

फिर दृश्य में

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

नोट : यह फ़िल्टर किसी भी और सभी एचटीएमएल को पारित करता है, और यदि उपयोगकर्ता इनपुट के साथ चर को पास किया जाता है तो एक एक्सएसएस भेद्यता प्रस्तुत कर सकता है।


उपयोग

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

तथा

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

इसके लिए, आपको angular-sanitize.js को शामिल करने की आवश्यकता है, उदाहरण के लिए आपकी एचटीएमएल फाइल में

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

एचटीएमएल पर

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

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

या

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

नियंत्रक पर

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

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

$scope.comment.msg = $sce.trustAsHtml(html); साथ भी काम करता है $scope.comment.msg = $sce.trustAsHtml(html);


कोणीय 4 के रूप में, यह वही तरीका है जो अब काम करता है:

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

here. इस सवाल से लिया गया here.


कोणीय 4 के साथ टेम्पलेट में एचटीएमएल प्रदर्शित करने के लिए पाइप के साथ कामकाजी उदाहरण।

1. क्रेटेड पाइप से बच- 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. app.module.ts पर पाइप पंजीकृत करें

 import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
    declarations: [...,EscapeHtmlPipe]
  1. अपने टेम्पलेट में प्रयोग करें

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

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

    संबंधित घटक.एस फ़ाइल में getDivHtml के लिए उचित कार्यान्वयन जोड़ें।


मैंने आज कोशिश की है, मुझे मिला एकमात्र तरीका यह था

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


मैंने पाया कि एनजी-सैनिटाइज का उपयोग करने से मुझे एचटीएमएल में एनजी-क्लिक जोड़ने की अनुमति नहीं मिली।

इसे हल करने के लिए मैंने एक निर्देश जोड़ा। इस कदर:

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

और यह एचटीएमएल है:

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

सौभाग्य।


सौभाग्य से, आपको उस त्रुटि संदेश से बचने के लिए किसी भी फैंसी फ़िल्टर या असुरक्षित तरीकों की आवश्यकता नहीं है। इच्छित और सुरक्षित तरीके से दृश्य में HTML मार्कअप को सही तरीके से आउटपुट करने के लिए यह पूर्ण कार्यान्वयन है।

एंजुलर के बाद sanitize मॉड्यूल शामिल किया जाना चाहिए:

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

फिर, मॉड्यूल लोड किया जाना चाहिए:

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

यह आपको नियंत्रक, निर्देश आदि से स्ट्रिंग में मार्कअप शामिल करने की अनुमति देगा:

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

अंत में, एक टेम्पलेट में, यह आउटपुट होना चाहिए:

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

जो अपेक्षित आउटपुट का उत्पादन करेगा: 42 जवाब है


स्कोप्ड विशेषता का उपयोग करने के अलावा ब्लॉब्र के समान एक और समाधान यह है:

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

और तब

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

ध्यान दें कि element.append() साथ element.replaceWith() को प्रतिस्थापित कर सकते हैं element.replaceWith()


कोणीय (v1.4) दस्तावेज़ों का पालन ​​करके बस ngBindHtml का उपयोग करके यह किया,

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

सुनिश्चित करें कि आप मॉड्यूल की निर्भरताओं में ngSanitize शामिल हैं। तो यह ठीक काम करना चाहिए।


ng-bind-html-unsafe अब काम नहीं करता है।

यह सबसे छोटा रास्ता है:

एक फ़िल्टर बनाएं:

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

और आपके विचार में:

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

पीएस इस विधि में आपको ngSanitize मॉड्यूल शामिल करने की आवश्यकता नहीं है।





html-sanitizing