कोणीय फ़िल्टर जो एचटीएमएल

Question

उत्पन्न करता है मेरे पास एक छोटा कोणीय फ़िल्टर है जो एक वास्तविक मान के स्थान पर एक (बूटस्ट्रैप) आइकन डालता है। यह काम करता है लेकिन एचटीएमएल इनकोडिंग:

var conApp = angular.module('conApp', []); 
    conApp.filter('trueIcon', function($filter){ 
    return function(booleanValue){ 
     return booleanValue ? '<i class="icon-ok"></i>' : ''; 
    } 
    }); 

मैं एचटीएमएल डिकोड करने के लिए एक और फिल्टर लागू करने के लिए है? क्या ऐसा करने का एक "कोणीय" तरीका है?

Answer 1

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

<span ng-bind-html="foo | trueIcon"></span> 

यह कहा गया ... वास्तव में यह नहीं है कि फ़िल्टर क्या हैं। व्यू/डीओएम के तत्वों को उत्पन्न करने के बजाय, फ़िल्टर को दृश्य में लिखे गए डेटा को स्क्रब करने के लिए अधिक हैं। आप शायद बेहतर हो जाएगा कि के लिए एक निर्देश बनाने:

app.directive('trueIcon', function() { 
    return { 
     restrict: 'E', 
     template: '<i ng-class="{\'icon-ok\': value, \'icon-not-okay\': !value}"></i>', 
     scope: { 
     value: '=' 
     } 
    }; 
}); 

<true-icon value="foo"></true-icon> 

Answer 2

AngularJS डिफ़ॉल्ट रूप से अभिव्यक्ति मूल्यांकन के परिणाम प्रतिबंध लगाया गया है। एचटीएमएल प्रदर्शित करने के लिए मार्कअप के रूप में आप 2 विकल्प हैं: (ngSanitize मॉड्यूल से)

• http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml
• http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe (मैं के रूप में यह संभावित सुरक्षा जोखिमों को खोलता है यह एक सिफारिश नहीं होगा)।

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