anguarjs के साथ कच्चे HTML को कैसे प्रस्तुत करें?

Question

मैं एक angularjs एकल पेज एप्लिकेशन बना रहा हूं। डेटा json -format में एक webservice से लाया जाएगा।

समस्या

कि कुछ पाठ तत्वों पूर्वस्वरूपित html टैग

के साथ आते है

json उत्पादन:

{ 
    "text": "<p><span style="text-decoration: underline;"><strong>test text</string></span></p>" 
} 

अब मैं इस पाठ को प्रदर्शित करने और एचटीएमएल सीधे प्रस्तुत करना है, इसलिए केवल "परीक्षण" है कि कर सकते हैं उपयोगकर्ता को दिखाया गया है और बाकी मार्कअप के रूप में कार्य करता है?

<h1>{{data.text}}</h1> 

Answer 1

आपको अपने एच 1 टैग में ng-bind-html="data.text" जोड़ने की आवश्यकता है।

<h1 ng-bind-html="data.text"></h1> 

प्रलेखन:: ngBindHtml

Answer 2

कोशिश इस https://docs.angularjs.org/api/ng/directive/ngBind

<script> 
    angular.module('bindExample', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
     $scope.name = 'Whirled'; 
    }]); 
</script> 
<div ng-controller="ExampleController"> 
    <label>Enter name: <input type="text" ng-model="name"></label><br> 
    Hello <span ng-bind="name"></span>! 
</div> 

Answer 3

Update2 उपयोग करने के लिए: जैसे

अपने HTML लगेगा यह आप के लिए एचटीएमएल पट्टी के लिए संभव है? यह इतना किया जा सकता है:

angular.module('myApp.filters', []). 
    filter('htmlToPlaintext', function() { 
     return function(text) { 
     return String(text).replace(/<[^>]+>/gm, ''); 
     }; 
    } 
); 

और आप HTML:

<div>{{myText | htmlToPlaintext}}</div> 

अधिक जानकारी देखें: angularjs to output plain text instead of html

अपडेट: तुम सच में अपने json से एचटीएमएल की ज़रूरत है? अपने एचटीएमएल को विचारों में स्टोर करना और अपने जेसन से डेटा प्राप्त करना बेहतर है। अच्छा अलगाव और उपयोग करने में बहुत आसान है।

यह संभव है, लेकिन गैर-एचटीएमएल (महान सुरक्षा) के रूप में इतना आसान नहीं है।

कोणीय 1.3 में आप इस प्रकार की जरूरत है:

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

अपने नियंत्रक में इस जोड़ें:

$scope.htmlBind = $sce.trustAsHtml('<span>Hi, I am <em>Joe</em>'); 

स्पष्टीकरण:

$ SCE एक है: आप $ SCE देखना सेवा जो AngularJS को सख्त प्रासंगिक एक्सेकिंग सेवाएं प्रदान करती है।

trustAs (प्रकार, मूल्य)

$ sceDelegate.trustAs के प्रतिनिधियों। इस प्रकार, एक ऑब्जेक्ट लौटाता है जो निर्दिष्ट सख्त प्रासंगिक भागने वाले संदर्भों (जैसे एनजी-बाइंड-एचटीएमएल, एनजी-शामिल, किसी भी स्रोत विशेषता इंटरपोलेशन, किसी भी डोम इवेंट बाध्यकारी विशेषता इंटरपोलेशन जैसे ऑनक्लिक इत्यादि) में उपयोग के लिए कोणीय द्वारा भरोसा किया जाता है।) जो प्रदत्त मूल्य का उपयोग करता है। सख्त प्रासंगिक भागने को सक्षम करने के लिए * $ sce देखें।

यहां अधिक पढ़ें:

• https://docs.angularjs.org/api/ng/service/ $ SCE
• AngularJS : Insert HTML into view