HTML को आउटपुट करने वाले angularjs फ़िल्टर कैसे बनाएं

Question

AngularJS ट्यूटोरियल स्टेप -9 पढ़ने के बाद मैंने अपना AngularJS फ़िल्टर बनाया है, जो बूलियन डेटा को html में बदलना चाहिए।

यहाँ मेरा फ़िल्टर कोड है:

angular.module('phonecatFilters', []).filter('iconify', function () { // My custom filter
    return function (input) {
        return input ? '<i class="icon-ok"></i>' : '<i class="icon-remove"></i>';
    }
});

यहाँ मेरा HTML कोड है:

<dt>Infrared</dt>
  <dd>{{phone.connectivity.infrared | iconify }}"></dd>

समस्या यह है कि borwser प्रदर्शित मूल्य का शाब्दिक अर्थ है:

<i class="icon-ok"></i>

आइकन के रूप में नहीं (या HTML का प्रतिपादन) जो प्रकट होना चाहिए।

यहाँ JSFiddle उदाहरण है

मुझे लगता है कि इस प्रक्रिया के दौरान कुछ स्वच्छता होती है।

क्या इस विशिष्ट फिल्टर के लिए इस स्वच्छता को बंद करना संभव है?

मुझे यह भी पता है कि फ़िल्टर से HTML आउटपुट वापस न करके आइकन कैसे प्रदर्शित करें, बल्कि 'ओके' या 'रिमूव' टेक्स्ट को छोड़ दें, जिसे मैं फिर से देख सकता हूं:

<i class="icon-{{phone.connectivity.infrared | iconify}}"><i>

लेकिन यह वह नहीं है जो मैं चाहता हूं।

Answer 1

आपको ng-bind-htmlनिर्देश का उपयोग करना चाहिए (सैनिटाइज़ मॉड्यूल और js फ़ाइल आयात करने की आवश्यकता है): https://docs.angularjs.org/api/ng/directive/ngBindHtml

<span ng-bind-html='phone.connectivity.infrared | iconify'></span>

आपको सीएसएस को आयात करने की भी आवश्यकता है ( बूटस्ट्रैप I अनुमान) जब यह काम करता है तो आइकन को देखने में सक्षम होने के लिए।

मैंने एक काम करने का उदाहरण दिया है ।

Comments

खैर यह एकमात्र तरीका है जिसे मैं कच्चे html को angularJS के साथ आउटपुट करना जानता हूं और इस बाइंडिंग को केवल विशेषताओं पर अनुमति दी जाती है ताकि आपके पास अधिक विकल्प न हों, आप स्वयं निर्देश लिख सकते हैं कि टिप्पणी या तत्वों को बाइंडिंग स्वीकार करें, बाइंड का स्रोत कोड लें- एक प्रारंभिक बिंदु के लिए HTML: github.com/angular/angular.js/blob/master/src/ngSanitize/…

— Guillaume86

एक निर्देश शायद सबसे अच्छा समाधान यहाँ <चेक-आइकन एनजी: मॉडल = 'phone.connectivity.infrared'> </ चेक-आइकन> लेकिन यह वास्तव में आपके समाधान की तुलना में नहीं छोटा है;)

— Guillaume86

ध्यान देने वाली एक बात यह है कि आपको angular-sanitize.jsकाम करने के लिए फाइल को शामिल करना होगा। यदि आप इस अतिरिक्त पुस्तकालय को शामिल किए बिना ही करना चाहते हैं, तो आप ng-bind-html-unsafeनिर्देश का उपयोग कर सकते हैं ।

— nwinkler

कोणीय 2.x बूँदें ng-html-bind-unsafeऔर HTML सामग्री को 'सुरक्षित' के रूप में स्पष्ट रूप से चिह्नित करने की आवश्यकता है - देखें: docs.angularjs.org/api/ng.$sce#Example

— hooblei

एक डिफ़ॉल्ट फ़िल्टर होना चाहिए {{myContent | myFilter | html_safe}}

— html_safe

Answer 2

जब तक मैं इसे गलत नहीं पढ़ रहा हूं, आप गलत तरीके से संपर्क कर रहे हैं

मुझे लगता है कि एनजी-क्लास को निर्देश है कि आपको इस नौकरी की आवश्यकता है और तब सुरक्षित है जो क्लास की विशेषता प्रदान करता है।

आपके मामले में कक्षा के रूप में आईडी स्ट्रिंग के साथ ऑब्जेक्ट स्ट्रिंग जोड़ें और मूल्यांकन अभिव्यक्ति के रूप में मूल्य

<i ng-class="{
'icon-ok':!phone.connectivity.infrared,
'icon-remove':phone.connectivity.infrared
}"></i>'

साइड नोट पर, आपको html / डोम में हेरफेर करने के लिए केवल निर्देशों (अंतर्निहित और कस्टम) का उपयोग करना चाहिए और यदि आपको अधिक जटिल HTML रेंडर की आवश्यकता है, तो आपको इसके बजाय निर्देश को देखना चाहिए

Comments

अच्छा समाधान। या थोड़ा सरल किया:<i ng-class="phone.connectivity.infrared ? 'icon-ok' : 'icon-remove'"></i>

— ग्रिड ट्रेकॉर

Answer 3

इस फ़िल्टर को आज़माएं

filter('trust', ['$sce',function($sce) {
  return function(value, type) {
    return $sce.trustAs(type || 'html', value);
  }
}]);

कोणीय-सफाई की आवश्यकता है

var app = angular.module("myApp", ['ngSanitize']);

लिंक दें