2014-09-26 24 views
23

में एचटीएमएल इकाई डीकोड करें मैं कोणीय जेएस का उपयोग कर पाठ में HTML इकाई को कैसे डीकोड कर सकता हूं।कोणीय जेएस

मैं स्ट्रिंग

""12.10 On-Going Submission of ""Made Up"" Samples."" 

मैं इस का उपयोग कर कोणीय जे एस डिकोड करने के लिए एक तरह से की जरूरत है। मुझे जावास्क्रिप्ट here का उपयोग करने का एक तरीका मिला लेकिन मुझे यकीन है कि यह कोणीय के लिए काम नहीं करेगा। यूआई पर मूल स्ट्रिंग जो

तरह
""12.10 On-Going Submission of ""Made Up"" Samples."" 

उत्तर

41

आप एक HTML सामग्री के रूप में यह प्रदर्शित करने के लिए सभी एचटीएमएल संस्थाओं के साथ डीकोड ng-bind-html निर्देश का उपयोग कर सकते लगेगा वापस पाने के लिए की जरूरत है। बस अपने आवेदन में ngSanitize निर्भरता शामिल करना सुनिश्चित करें।

DEMO

JAVASCRIPT

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

    .controller('Ctrl', function($scope) { 
    $scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."'; 
    }); 

एचटीएमएल

<body ng-controller="Ctrl"> 
    <div ng-bind-html="html"></div> 
    </body> 
+14

लेकिन अगर आप एचटीएमएल के रूप में यह प्रदान की गई करने के लिए अभ्यस्त न, आप कैसे इसके साथ सौदा कर सकते हैं? –

22

आप ngSanitize का उपयोग नहीं करना चाहते, तो आप इसे इस तरह कर सकते हैं:

0,123,

अपने नियंत्रक में:

$scope.html = '&quot;12.10 On-Going Submission of &quot;&quot;Made Up&quot;&quot; Samples.&quot;' 
$scope.renderHTML = function(html_code) 
     { 
      var decoded = angular.element('<textarea />').html(html_code).text(); 
      return $sce.trustAsHtml(decoded); 
     }; 

और टेम्पलेट में:

<div ng-bind-html="renderHTML(html)"></div> 

बस सुनिश्चित करें कि,

+0

यह काम करता है लेकिन मुझे यह त्रुटि कंसोल में मिलती है: 'angular.min.js: 123 TypeError: angular.element (...)। Html (...)। पाठ एक समारोह नहीं है बी $ scope.renderHTML (app.js: 24) एफएन पर (संकलन पर eval (angular.min.js: 239), : 4: 284) angular.min.js पर: 12 9 एम $ $ पाचन (कोणीय .min.js: 146) एम $ $ पर लागू होता है (angular.min.js: 149) angular.min.js पर: 21 ऑब्जेक्ट.inवोक (angular.min.js: 44) सी (कोणीय पर) .min.js: 21) एससी पर (angular.min.js: 22) ue (angular.min.js: 20) पर ' – Flash

1

मैं इसी तरह की समस्या आ रही है आप अपने नियंत्रक में $ SCE इंजेक्षन बनाने की जरूरत नहीं है लेकिन यूआई पर परिणाम मूल्य का उपयोग करने के लिए। यह समस्या कोणीय ngSanitize मॉड्यूल से कोड द्वारा हल किया गया:

var hiddenPre=document.createElement("pre"); 
 
/** 
 
* decodes all entities into regular string 
 
* @param value 
 
* @returns {string} A string with decoded entities. 
 
*/ 
 
function decodeEntities(value) { 
 
    if (!value) { return ''; } 
 
    
 
    hiddenPre.innerHTML = value.replace(/</g,"&lt;"); 
 
    // innerText depends on styling as it doesn't display hidden elements. 
 
    // Therefore, it's better to use textContent not to cause unnecessary reflows. 
 
    return hiddenPre.textContent; 
 
} 
 

 

 
var encoded = '&lt;p&gt;name&lt;/p&gt;&lt;p&gt;&lt;span style="font-size:xx-small;"&gt;ajde&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;da&lt;/em&gt;&lt;/p&gt;'; 
 
var decoded = decodeEntities(encoded); 
 

 
document.getElementById("encoded").innerText=encoded; 
 
document.getElementById("decoded").innerText=decoded;
#encoded { 
 
    color: green; 
 
} 
 

 
#decoded { 
 
    color: red; 
 
}
Encoded: <br/> 
 
<div id="encoded"> 
 
</div> 
 

 
<br/> 
 
<br/> 
 

 
Decoded: <br/> 
 
<div id="decoded"> 
 
</div>