এইচটিএমএল আউটপুট দেয় এমন কৌণিক জাল ফিল্টার কীভাবে তৈরি করবেন

Question

অ্যাঙ্গুলারজেএস টিউটোরিয়াল স্টেপ -9 পড়ার পরে আমি আমার নিজস্ব অ্যাংুলারজেএস ফিল্টার তৈরি করেছি, যা বুলিয়ান ডেটা এইচটিএমএলে রূপান্তরিত করা উচিত।

আমার ফিল্টার কোডটি এখানে:

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

এখানে আমার এইচটিএমএল কোডটি রয়েছে:

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

সমস্যাটি হচ্ছে যে bণগ্রহীতা প্রত্যাশিত মানটি আক্ষরিক হিসাবে প্রদর্শন করে:

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

আইকন (বা রেন্ডার এইচটিএমএল) হিসাবে প্রদর্শিত হবে না হিসাবে প্রদর্শিত হবে।

এখানে জেএসফিডেলের উদাহরণ

আমি মনে করি যে এই প্রক্রিয়া চলাকালীন কিছু স্যানিটাইটিসেশন ঘটে।

এই নির্দিষ্ট ফিল্টারটির জন্য কি এই স্যানিটাইজেশন বন্ধ করা সম্ভব?

এছাড়াও আমি জানি ফিল্টার থেকে এইচটিএমএল আউটপুট না ফিরিয়ে আইকনগুলি কীভাবে প্রদর্শন করতে হয় তবে কেবল 'ঠিক আছে' বা 'অপসারণ' পাঠ্যটি যা আমি এর পরে প্রতিস্থাপন করতে পারি:

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

তবে এটি আমি চাই না।

Answer 1

আপনার ng-bind-htmlনির্দেশিকাটি ব্যবহার করা উচিত (স্যানিটাইজ মডিউল এবং জেএস ফাইলটি আমদানি করা প্রয়োজন): https://docs.angularjs.org/api/ng/directive/ngBindHtml

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

আইকনটি যখন কাজ করে তখন দেখতে সক্ষম হতে আপনাকে সিএসএস ( বুটস্ট্র্যাপ অনুমান করি) আমদানি করতে হবে।

আমি একটি কাজের উদাহরণ প্রদান করেছি ।

Comments

ওয়েল এটি আমিই কৌণিক জেএস দিয়ে কাঁচা এইচটিএমএল আউটপুট জানার একমাত্র উপায় এবং এই বাঁধাই কেবলমাত্র বৈশিষ্ট্যগুলিতে অনুমোদিত তাই আপনার পছন্দ বেশি নেই, আপনি নিজেরাই নিজের নির্দেশিকা লিখতে পারেন যা মন্তব্য বা উপাদানগুলির বাইন্ডিং গ্রহণ করে, বাইন্ডের উত্স কোডটি গ্রহণ করে - এইচটিএমএল আদ্যস্থল জন্য: github.com/angular/angular.js/blob/master/src/ngSanitize/...

— Guillaume86

একটি নির্দেশনা সম্ভবত এখানে সর্বোত্তম সমাধান <চেক-আইকন এনজি: মডেল = 'phone.connectivity.infrared'> </check-icon> তবে এটি আপনার সমাধানের তুলনায় আসলেই খাটো নয়;)

— গিলাইউমূম

একটি বিষয় লক্ষনীয় যে angular-sanitize.jsএটিকে কাজ করার জন্য আপনার ফাইলটি অন্তর্ভুক্ত করতে হবে। আপনি যদি এই অতিরিক্ত পাঠাগারটি অন্তর্ভুক্ত না করে একই কাজ করতে চান তবে আপনি ng-bind-html-unsafeনির্দেশটি ব্যবহার করতে পারেন ।

— এনভিঙ্কলার

কৌণিক 2.x টি ড্রপ করে ng-html-bind-unsafeএবং এইচটিএমএল বিষয়বস্তুগুলিকে স্পষ্টভাবে 'নিরাপদ' হিসাবে চিহ্নিত করা দরকার - দেখুন: ডকস.অঙ্গুলারজ.স.আর.সি.পি.

— এস.সি.এস.সি.এস.সি.এস.পি._ hooblei

একটি ডিফল্ট ফিল্টার html_safe থাকা উচিত:{{myContent | myFilter | html_safe}}

— অগাস্টিন রিডিংগার

Answer 2

আমি যদি এটি ভুল পাঠ না করি তবে আপনি ভুল পথে এগিয়ে যাচ্ছেন

আমি মনে করি এনজি-ক্লাসটি এই কাজের জন্য আপনার প্রয়োজনীয় নির্দেশিকা এবং এটি ক্লাসের বৈশিষ্ট্যে রেন্ডারিংয়ের পরে সুরক্ষিত।

আপনার ক্ষেত্রে কেবল আইডি স্ট্রিংগুলির সাথে শ্রেণি হিসাবে মূল্যায়ন করা এবং মান হিসাবে মূল্যবান এক্সপ্রেশন হিসাবে মান যুক্ত করুন

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

সাইড নোটে, আপনাকে কেবল এইচটিএমএল / ডোম চালনার জন্য নির্দেশাবলী (অন্তর্নির্মিত এবং কাস্টম) ব্যবহার করা উচিত এবং যদি আপনার আরও জটিল এইচটিএমএল রেন্ডারের প্রয়োজন হয় তবে পরিবর্তে আপনাকে নির্দেশের দিকে নজর দেওয়া উচিত

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']);

সংক্ষিপ্ত লিঙ্ক