एनजी-बाइंड के अंदर पार्स एचटीएमएल angularJS

Question

का उपयोग कर मुझे कोणीय जेएस के साथ समस्या हो रही है। मेरा एप्लिकेशन सर्वर से कुछ डेटा अनुरोध करता है और सर्वर से लौटाए गए डेटा से मूल्यों में से एक HTML की एक स्ट्रिंग है। मैं इस

<div>{{{item.location_icons}}</div> 

की तरह मेरे कोणीय टेम्पलेट में यह बाध्यकारी रहा हूँ, लेकिन जैसा कि आप उम्मीद कर सकते हैं क्या मैं देख रहा हूँ माउस छवियों नहीं है, लेकिन मार्कअप मूल रूप से div में सामान की तरह

"<i class='my-icon-class'/>" 

लग रहा है जो वह नहीं है जो मैं चाहता हूं।

किसी को भी क्या मैं ट्रांसक्लुजन

Answer 1

आप उद्देश्य उस तरह के लिए ng-bind-html और ng-bind-html-unsafe उपयोग करना चाहते हैं एचटीएमएल पार्स करने के लिए क्या कर सकते हैं पता है।

उदाहरण दिखाए जाते हैं here

Answer 2

एक बेहतर तरीका $compile बजाय ng-bind-html-unsafe उपयोग करने के लिए है।

देखें: http://docs.angularjs.org/api/ng.$compile

अन्त में, इस समय, AngularJS के पिछले संस्करण (रिलीज उम्मीदवार 1.2.0) किसी भी ng-bind-html-unsafe निर्देश नहीं है। तो मैं वास्तव में आपको अपने ऐप के भविष्य के अपडेट से पहले इस विकल्प पर विचार करने के लिए प्रोत्साहित करता हूं। (ng-bind-html-unsafe/किसी भी अधिक काम कर सकता है नहीं ...)

http://code.angularjs.org/1.2.0rc1/docs/api/ng.directive:ngBindHtml

Answer 3

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

$scope.toTrustedHTML = function(html){ 
    return $sce.trustAsHtml(html); 
} 

और अपने ध्यान में रखते हुए कुछ इस तरह का उपयोग करें::

आप अपने नियंत्रक के अंदर समारोह बनाने की जरूरत

<span ng-bind-html='toTrustedHTML(myHTMLstring)'></span> 

मत भूलना $ SCE सुई:

AppObj.controller('MyController', function($scope, $sce) { 
    //your code here 
});