HTML को AngularJS कंट्रोलर से देखें

Question

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

यह एक असंगत 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>

Comments

कृपया यह प्रश्न भी देखें , कि क्या यह संभव है कि सम्मिलित HTML में स्क्रिप्ट को चलाना संभव हो।

— एनगमेंट

क्या कई वस्तुओं को एक ही एनजी-बिंद से बांधना संभव है? जैसे `` `एनजी-बिंद =" site.address_1 site.address_2 site.zip "

— fauverism

यदि आपके पास अपने पेज पर बहुत सारा सामान है, तो आपको कोणीय .js (पागलपन) की लाइन 15046 को बदलना होगा function htmlSanitizer(html) {...। कोणीय देव का निर्णय है कि आप किसी एक html को धीरे-धीरे अपने सभी पेजों के छिपे हुए तत्वों के माध्यम से एक-एक करके पता लगाने में सक्षम होना चाहिए कि HTML का एक एकल लापता टुकड़ा। !!! इस तरह की धारणा पर बहुत गुस्सा !!!

— user3338098

क्षमा करें, ल्यूक द्वारा चुना गया उत्तर पूरी तरह से सही उत्तर नहीं हो सकता है। एक अन्य प्रश्न का सही उत्तर यहाँ मिल सकता है । असल में, "एनजी-बाइंड-एचटीएमएल-असुरक्षित केवल HTML के रूप में सामग्री का प्रतिपादन करता है। यह परिणामी डोम के लिए कोणीय गुंजाइश नहीं बांधता है। आपको उस उद्देश्य के लिए $ संकलन सेवा का उपयोग करना होगा।"

— gm2008

ng-bind सभी आंतरिक html को हटाता है। फ़िल्टर कैसे काम करेगा, यह ठीक नहीं है, जब फ़िल्टर का एकमात्र मूल्य होता है

— मुहम्मद उमर

Answer 1

कोणीय 1.x के लिए, ng-bind-htmlHTML में उपयोग करें :

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

इस बिंदु पर आपको एक attempting to use an unsafe value in a safe contextत्रुटि प्राप्त होगी ताकि आपको इसे हल करने के लिए ngSanitize या $ sce का उपयोग करने की आवश्यकता हो ।

$ SCE

$sce.trustAsHtml()Html string को Convert करने के लिए कंट्रोलर में उपयोग करें ।

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

ngSanitize

2 चरण हैं:

1. कोणीय-sanitize.min.js संसाधन शामिल करें, अर्थात:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. एक js फ़ाइल में (नियंत्रक या आमतौर पर app.js), ngSanitize, अर्थात् शामिल करें:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Comments

कोणीय 1.2 में, ng-bind-html-unsafeहटा दिया गया था और दोनों निर्देशों को मिला दिया गया था। देखें: github.com/angular/angular.js/blob/master/…

— साशा चेडिओगो

NgSanitize का उपयोग किए बिना, यह अब उपयोग करके किया जा सकता है $sce। इसे कंट्रोलर में इंजेक्ट करें और इसके माध्यम से html पास करें। $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);वरना मुझे मिलता रहाattempting to use an unsafe value in a safe context

— मटेसमन

हमें यहां थोड़ी सफाई की जरूरत है जो कि सही तरीका है जो मेरे लिए काम नहीं करता है।

— उतरा

stackoverflow.com/questions/21829275/… <- मेरे लिए काम किया :) यहाँ जवाब में कोई भी विकल्प दुर्भाग्य से काम नहीं किया

— apatel

बस इसलिए लोग निराश नहीं होते हैं, इस जवाब का नवीनतम अपडेट, जवाब के नीचे ngSanitize आवश्यकता के साथ मिलकर वास्तव में काम करता है।

— बेन कुल

Answer 2

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

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>

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

Comments

@ केटी एस्ट्रास्कस, एवर के लिए धन्यवाद! बहुत साफ तरीका है। BTW ngResourceनिर्भरता neccesary नहीं है।

— 12

इसका उपयोग तब ही करें जब आप HTML पर पूरी तरह से भरोसा करें। यह HTML को किसी भी तरह से पवित्र नहीं करता है, लेकिन केवल कोणीय को पृष्ठ में इंजेक्ट करने की अनुमति देता है। दुर्भावनापूर्ण HTML XSS हमलों को भड़का सकता है।

— जन.दबर्घ २३'१५ को

यदि प्रदर्शन महत्वपूर्ण है, तो आपको फ़िल्टर का उपयोग करने से बचना चाहिए। एक फिल्टर हर बार दो डाइजेस्ट को ट्रिगर करेगा।

— टैंटलोपे

फ़िल्टर क्यों कहा जाता है sanitize? यह इतना भ्रामक है क्योंकि यह वास्तव में कुछ भी साफ नहीं करता है। इसके बजाय इसे बुलाया जाना चाहिए trust, trustSafeया कुछ इसी तरह का।

— डेनिस पशेनोव 19

अद्भुत जवाब। rawHtmlके बजाय फिल्टर के लिए मेरा नाम है sanitize।

— वूम्स

Answer 3

Angular JS टैग के भीतर HTML दिखाता है

उपरोक्त लिंक में प्रदान किए गए समाधान ने मेरे लिए काम किया, इस धागे पर कोई भी विकल्प नहीं किया। AngularJS संस्करण 1.2.9 के साथ एक ही चीज़ की तलाश में किसी के लिए

यहाँ एक प्रति है:

ठीक है, मुझे इसका हल मिला:

जे एस:

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

HTML:

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

संपादित करें:

यहाँ सेट है:

जेएस फाइल:

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 फ़ाइल:

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

Comments

ध्यान रखें कि आपको पूरी तरह से आश्वस्त होने की आवश्यकता है कि HTML पर भरोसा किया जा सकता है। अन्यथा XSS हमलों के लिए दरवाजा व्यापक है।

— जन.दंबरब

HTML को रेंडर करने के लिए एक फ़ंक्शन का उपयोग करके यह समाधान, केवल एक ही है जो मेरे लिए काम करता है।

— मार्सेलो बार्बोसा

'$ http' किसके लिए है?

— सोल्डप्लाटा साकेतोस

@SoldeplataSaketos विशेष रूप से कुछ भी नहीं है, मुझे लगता है कि मैं उस समय स्थानीय स्तर पर कोशिश कर रहा था और मैंने निर्भरता की नकल को समाप्त कर दिया।

— एपतेल

एक ही जवाब अद्यतन यहाँ। stackoverflow.com/questions/21829275/…

— सूर्य आर प्रवीण

Answer 4

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

सैनिटरीकृत मॉड्यूल को कोणीय के बाद शामिल किया जाना चाहिए:

<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 है जवाब ।

Comments

कुछ html आज़माएं <div><label>Why My Input Element Missing</label><input /></div>... अगर आपको आश्चर्य है तो अपने उत्तर को अपडेट करें plz .. क्योंकि मैंने सभी 10 + वोट समाधानों का परीक्षण किया है .. आपके समाधान ने मेरे इनपुट टैग देखने के लिए मेरे लिए काम नहीं किया है .. ठीक है अन्यथा .. मैंने उपयोग किया था$sce.trustAsHtml(html)

— सामी

यह समाधान काम करता है, एक jsfiddle या plunkr पोस्ट करने के लिए देखभाल?

— पियर-ल्यूक गेंड्रेयू

नवीनतम कोणीय

— संदीप

Answer 5

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

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

Comments

इस समाधान का उपयोग केवल तभी किया जाना चाहिए जब स्रोत क्रॉस-साइट स्क्रिप्टिंग हमलों से बचने के लिए विश्वसनीय हो।

— बर्ट्रेंड

कोणीय 1.0.2 के रूप में, यह मेरे लिए काम करता है, जिसमें कोई अन्य फाइल या हुकअप आवश्यक नहीं है।

— एनगमेंट

कोणीय 1.0.8 का उपयोग करना और यह मेरे लिए काम करता है। हालांकि @ बर्ट्रेंड की चेतावनी पर ध्यान दें, सुनिश्चित करें कि आप स्रोत पर भरोसा करते हैं।

— जैक स्लिंगरलैंड

भविष्य के संदर्भ के लिए एनजी-बाइंड-html-असुरक्षित को 1.2 संस्करण में हटा दिया गया था। अब आपको ngSanitize मॉड्यूल की आवश्यकता है और असुरक्षित HTML को बाँधने के लिए आपको $ sce.trustAsHtml विधि का उपयोग करना चाहिए।

— लुकास लजारो

Answer 6

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

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

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

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

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

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

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

Comments

यह सबसे अच्छा समाधान है जो मैंने यहां कोणीय 1.2 के लिए देखा है। $sceस्वीकृत उत्तर का उपयोग करने वाला समाधान मेरे लिए काम नहीं करता था और मैं कुछ बहुत तुच्छ के लिए एक अतिरिक्त निर्भरता को शामिल नहीं करना चाहता था।

— डैनियल बॉननेल 1

बिधान भट्टाराई के समाधान ने मेरे लिए काम किया। कोणीय 1.6.1

— मध्यगुरु

Answer 7

html पर

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

Comments

$sceसाफ-सुथरा है, लेकिन क्या कोई उपयोगकर्ता यहां एक ब्रेकपॉइंट नहीं जोड़ सकता है और किसी this.myCtrl.comment.msgडीबगर का उपयोग करने के लिए किसी भी दुर्भावनापूर्ण कोड को पुनर्स्थापित कर सकता है?

— ब्रैडगर्न्स

फिर ब्रैडगर्न्स, क्या आप एनजी-बाइंड-html-असुरक्षित के साथ भी ऐसा ही कर पाएंगे?

— कोडऑवरराइड

अगर कोई वहां अपना खुद का ब्राउज़र हैक करना चाहता है, जो परवाह करता है। यह अन्य उपयोगकर्ताओं को प्रभावित नहीं करेगा। @ ब्रैडग्रेन क्या यह सवाल है?

— क्रिस स्टीफंस

@ChrisStephens आप सही हैं। मुझे लगता है कि मेरे सवाल का जवाब है, लेकिन मेरी राय है कि ये विशेषताएं वास्तविक सुरक्षा की तुलना में कथित सुरक्षा के करीब हैं। शायद यह किसी प्रकार के स्वचालित हमलों से बचाता है? मैंने कभी स्पष्ट रूप से समझ नहीं पाया कि ऐसा करने से वास्तव में ऐप को मदद मिलती है। मेरे ऐप को wysiwyg HTML रेंडर करने के सभी उदाहरणों के लिए एक फिल्टर जोड़ना है क्योंकि इसमें इनलाइन CSS हो सकता है, जो ng-bind-htmlस्ट्रिप्स आउट करता है।

— ब्रैडग्रेन

वैसे ये सुविधाएँ सुरक्षित कोडिंग गलतियों को कम करने में मदद करती हैं। विशेष रूप से मार्कअप / कोड इंजेक्शन के साथ समस्या। डिफ़ॉल्ट रूप से सभी बाध्य डेटा प्रदर्शन के लिए एन्कोडेड है। तो मूल रूप से यदि आप मार्कअप का उत्पादन करना चाहते हैं तो यह सोचने पर मजबूर करता है कि आप क्या करने की कोशिश कर रहे हैं। इन सुविधाओं के बिना आप अकेले सर्वर साइड सुरक्षा के साथ बहुत कुछ कर सकते हैं, लेकिन अलग-अलग चिंताओं के लिए क्लाइंट ऐप को डेटा को सही ढंग से प्रदर्शन के लिए संभालने का शुल्क देना चाहिए।

— क्रिस स्टीफंस

Answer 8

मैंने पाया कि ng-sanitize का उपयोग करने से मुझे html में ng-click को जोड़ने की अनुमति नहीं मिली।

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

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

और यह HTML है:

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

सौभाग्य।

Answer 9

बस कोणीय (v1.4) डॉक्स के बाद ngBindHtml का उपयोग करके यह किया है ,

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

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

Answer 10

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

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

Answer 11

कोणीय में नई विशेषता या निर्देशों का उपयोग करके इस समस्या का एक और समाधान है ।

उत्पाद-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>

या

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

या

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

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

Answer 12

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

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

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

Comments

आपको यकीन है कि एनजी-इन-यूज़ का उपयोग करने के लिए आपको बस इतना ही चाहिए?

— नौसिखिया

हाँ .. मैंने इसे आज़माया है। और यदि आप टेम्पलेट का उपयोग कर रहे हैं तो इसे निम्न तरीके से उपयोग करें - <script type = "text / ng-template" id = "custom.html">

— विकाश शर्मा

Answer 13

यहाँ समाधान इस तरह एक फिल्टर बनाने के लिए है

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

और इसे ng-bind-html जैसे फ़िल्टर के रूप में लागू करें

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

और रूबेन डिक्रोप को धन्यवाद

Answer 14

उपयोग

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

तथा

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

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

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

Answer 15

यहाँ एक सरल (और असुरक्षित) bind-as-htmlनिर्देश है, जिसकी आवश्यकता के बिना ngSanitize:

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

ध्यान दें कि यह सुरक्षा के मुद्दों के लिए खुल जाएगा, अगर अविश्वासित सामग्री को बाध्य करना।

ऐसे उपयोग करें:

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

Answer 16

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

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]

3. अपने टेम्पलेट में उपयोग करें

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

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

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

Comments

मुझे लगता है कि वह एंगुलरजेएस के साथ काम कर रहा है, नए संस्करण के साथ नहीं।

— कुष्ठ रोग

Answer 17

बस सरल उपयोग [innerHTML], नीचे की तरह:

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

उपयोग करने से पहले ng-bind-html...

Comments

यह केवल कोणीय (कोणीय संस्करण 2+) के भीतर उपलब्ध है, न कि AngularJS (कोणीय संस्करण 1)।

— स्टेप 2425

Answer 18

कोणीय 7 + आयनिक 4 में, एचटीएमएल सामग्री को "[इनर HTML]" का उपयोग करके दिखाया जा सकता है:

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

मुझे उम्मीद है, यह आपकी मदद भी करेगा। धन्यवाद।

Comments

कृपया मुझे बताएं कि इस कोड में क्या गलत है जो इस पोस्ट को कम करने का कारण है। मैंने अपने 2 एप्लिकेशन में इस कोड का परीक्षण किया है। यह काम करता हैं। कृपया अपना अनुभव साझा करें। बहुत बहुत धन्यवाद।

— कमलेश

AngularJS, Angular 1.x के बराबर है। कोणीय 7 एक पूरी तरह से अलग रूपरेखा है

— Aw Snap