অ্যাঙ্গুলারজেএস কন্ট্রোলার থেকে ভিউতে HTML sertোকান sert

Question

এইচটিএমএল তৈরি করা কি সম্ভব?একটি কৌণিক জেএস কন্ট্রোলারে খণ্ড এবং এই এইচটিএমএলটি ভিউতে দেখানো সম্ভব?

এটি অসঙ্গত জেএসএন ব্লবকে জোড়ের নীড় তালিকায় পরিণত করার প্রয়োজনীয়তা থেকে আসে id: value। অতএব এইচটিএমএলটি কন্ট্রোলারে তৈরি হয়েছে এবং আমি এখন এটি প্রদর্শন করতে চাইছি।

আমি একটি মডেল সম্পত্তি তৈরি করেছি, তবে এটি কেবল এইচটিএমএল প্রিন্ট না করে ভিউতে এটি রেন্ডার করতে পারি না ।

---

হালনাগাদ

এটি প্রদর্শিত হয় যে সমস্যাটি কৌণিকভাবে তৈরি এইচটিএমএলকে উদ্ধৃতিগুলির মধ্যে একটি স্ট্রিং হিসাবে রেন্ডারিং থেকে উদ্ভূত হয়েছিল। এর আশেপাশে কোনও উপায় খুঁজতে চেষ্টা করবে।

উদাহরণস্বরূপ নিয়ামক:

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

উদাহরণ দেখুন:

<div ng:bind="customHtml"></div>

দেয়:

<div>
    "<ul><li>render me please</li></ul>"
</div>

Comments

এছাড়াও question োকানো এইচটিএমএল চালানোর জন্য স্ক্রিপ্টগুলি পাওয়া সম্ভব কিনা তা জিজ্ঞাসা করে এই প্রশ্নটি দেখুন ।

— এনগিমেট

একাধিক অবজেক্ট একই এনজি-বাইন্ডের সাথে আবদ্ধ থাকা কি সম্ভব? যেমন `` `ng-bind =" সাইট.address_1 সাইট.address_2 সাইট.zip "

— ফাউচারিজম

আপনার পৃষ্ঠায় যদি প্রচুর স্টাফ থাকে তবে আপনাকে কৌণিক.জে (পাগল) এর 15046 রেখাটি পরিবর্তন করতে হবে function htmlSanitizer(html) {...। কৌণিক দেব সিদ্ধান্ত নিয়েছে যে আপনি এইচটিএমএলের একক এক অনুপস্থিত অংশটি খুঁজে পেতে ধীরে ধীরে আপনার সমস্ত পৃষ্ঠাগুলি লুকিয়ে থাকা উপাদানগুলির মধ্যে দিয়ে ধীরে ধীরে কোনও HTML বাঁধাই সন্ধান করতে সক্ষম হবেন। !!! এমন অনুমানের উপর খুব রাগ !!!

— ব্যবহারকারী 3338098

দুঃখিত, লুকের দ্বারা নির্বাচিত উত্তর সম্পূর্ণ সঠিক উত্তর নাও হতে পারে। সঠিক উত্তরটি এখানে অন্য একটি প্রশ্নে পাওয়া যাবে । মূলত, "এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ কেবল বিষয়বস্তুকে এইচটিএমএল হিসাবে রেন্ডার করে It

— gm2008

এনজি-বাইন্ড সমস্ত অভ্যন্তরীণ এইচটিএমএল সরিয়ে দেয়। যা ফিল্টার কীভাবে কাজ করবে তা নয়, ফিল্টার যখন একমাত্র মান হয়

— মুহাম্মাদ উমার

Answer 1

কৌণিক 1.x এর জন্য, ng-bind-htmlHTML এ ব্যবহার করুন:

<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>

এই মুহুর্তে আপনি একটি attempting to use an unsafe value in a safe contextত্রুটি পাবেন যাতে আপনার এটির সমাধান করতে হয় এনজি সানাইটিজ বা $ দৃশ্যের প্রয়োজন ।

$ sce

$sce.trustAsHtml()এইচটিএমএল স্ট্রিং রূপান্তর করতে নিয়ামক ব্যবহার করুন ।

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize

2 টি পদক্ষেপ রয়েছে:

1. কৌণিক- sanitize.min.js সংস্থান অন্তর্ভুক্ত করুন, অর্থাত:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. একটি জেএস ফাইলে (নিয়ামক বা সাধারণত অ্যাপ্লিকেশন। জেএস) এনজি সানাইটিজ অন্তর্ভুক্ত করুন, অর্থাত:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Comments

কৌণিক 1.2 তে, ng-bind-html-unsafeসরানো হয়েছিল এবং দুটি নির্দেশকে একত্রিত করা হয়েছিল। দেখুন: github.com/angular/angular.js/blob/master/…

— সাশা চেদিগোভ

এনজিএসিটাইজ ব্যবহার না করে এখনই এটি ব্যবহার করে করা যেতে পারে $sce। এটিকে কন্ট্রোলারে প্রবেশ করুন এবং এর মাধ্যমে এইচটিএমএল পাস করুন। $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);অন্যথায় আমি পেতে থাকিattempting to use an unsafe value in a safe context

— ম্যাটসেম্যান

আমাদের এখানে একটি পরিষ্কার পরিচ্ছন্নতার প্রয়োজন যা সঠিকভাবে কিছুই আমার জন্য কাজ করে না বলে মনে হয়।

— অবতরণ করেছে

stackoverflow.com/questions/21829275/… <- আমার জন্য কাজ করেছে :) উত্তরের উত্তরগুলির মধ্যে কোনও

— বিকল্পই

ঠিক তাই লোকেরা নিরাশ হয় না, উত্তরের নীচে NgSanitize প্রয়োজনীয়তার সাথে এই উত্তরটির সর্বশেষ আপডেটটি বাস্তবে কার্যকর হয়।

— বেন কুল 11'14

Answer 2

আপনি এর মতো একটি ফিল্টারও তৈরি করতে পারেন:

var app = angular.module("demoApp", ['ngResource']);

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

তারপরে ভিউতে

<div ng-bind-html="trusted_html_variable | trust"></div>

দ্রষ্টব্য : এই ফিল্টারটি এটির যে কোনও এবং সমস্ত এইচটিএমএলকে বিশ্বাস করে এবং এটি যদি ব্যবহারকারী ইনপুট সহ ভেরিয়েবলগুলি পাস করা হয় তবে একটি এক্সএসএস দুর্বলতা উপস্থাপন করতে পারে।

Comments

কেটি অ্যাস্ট্রাউস্কাস, নতুনভাবে ধন্যবাদ দেওয়ার জন্য আপনাকে ধন্যবাদ! খুব পরিষ্কার উপায়। বিটিডাব্লু ngResourceনির্ভরতা neccesary নয়।

— অ্যাথলান

আপনি যখন এইচটিএমএলকে পুরোপুরি বিশ্বাস করেন কেবল তখনই এটি ব্যবহার করুন। এটি কোনওভাবেই এইচটিএমএলকে স্যানিটাইজ করে না, তবে কেবল কৌনিকটি পৃষ্ঠাতে এটি ইনজেকশনের অনুমতি দেয়। ক্ষতিকারক এইচটিএমএল এক্সএসএস আক্রমণকে উস্কে দিতে পারে।

— jan.vdbergh

যদি পারফরম্যান্স গুরুত্বপূর্ণ হয়, আপনি ফিল্টার ব্যবহার করা এড়ানো উচিত। একটি ফিল্টার প্রতিবার দুটি হজমকে ট্রিগার করে।

— ট্যানটেলোপ

ফিল্টার কেন বলা হয় sanitize? এটি আসলে বিভ্রান্তিকর কারণ এটি কোনও কিছুই স্যানিটাইজ করে না। পরিবর্তে এটি বলা উচিত trust, trustSafeবা অনুরূপ কিছু।

— ডেনিস সেশেনভ

আশ্চর্য উত্তর। rawHtmlফিল্টারটির পরিবর্তে আমার নাম sanitize।

— Wumms

Answer 3

কৌণিক জেএস ট্যাগের মধ্যে এইচটিএমএল দেখায়

উপরের লিঙ্কে প্রদত্ত সমাধানটি আমার পক্ষে কাজ করেছে, এই থ্রেডের বিকল্পগুলির মধ্যে কোনওটিই করেনি। যে কেউ AngularJS সংস্করণ 1.2.9 দিয়ে একই জিনিস খুঁজছেন তাদের জন্য

এখানে একটি অনুলিপি:

ঠিক আছে আমি এর জন্য সমাধান পেয়েছি:

জাতীয়:

$scope.renderHtml = function(html_code)
{
    return $sce.trustAsHtml(html_code);
};

এইচটিএমএল:

<p ng-bind-html="renderHtml(value.button)"></p>

সম্পাদনা করুন:

এখানে সেট আপ করা হয়েছে:

জেএস ফাইল:

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }]);

এইচটিএমএল ফাইল:

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>

Comments

এইচটিএমএল বিশ্বাস করা যেতে পারে যে আপনি সম্পূর্ণ নিশ্চিত হওয়া প্রয়োজন সচেতন হন। অন্যথায় এক্সএসএস আক্রমণগুলির জন্য দরজা প্রশস্ত।

— jan.vdbergh

এইচটিএমএল রেন্ডার করতে একটি ফাংশন ব্যবহার করে এই সমাধানটি আমার জন্য কাজ করেছে।

— মার্সেলো বারবোসা

'$ http' কীসের জন্য?

— সলডেপ্লাটা সাকেটোস

সলডপ্লাটাসেকটোস বিশেষত কিছুই নয়, আমার মনে হয় আমি সে সময় স্থানীয়ভাবে এটি চেষ্টা করেছিলাম এবং নির্ভরতা অনুলিপি করে শেষ করেছি।

— অ্যানপেটেল

একই উত্তর আপডেট এখানে। stackoverflow.com/questions/21829275/…

— সূর্য আর প্রবীণ

Answer 4

ভাগ্যক্রমে, ত্রুটি বার্তাটি এড়াতে আপনার কোনও অভিনব ফিল্টার বা অনিরাপদ পদ্ধতির দরকার নেই। উদ্দেশ্য এবং সুরক্ষিত উপায়ে সঠিকভাবে এইচটিএমএল মার্কআপ আউটপুট দেওয়ার এটি সম্পূর্ণ বাস্তবায়ন।

স্যানিটাইজ মডিউলটি অবশ্যই কৌণিকের পরে অন্তর্ভুক্ত করা উচিত:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

তারপরে, মডিউলটি লোড করা আবশ্যক:

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

এটি আপনাকে নিয়ামক, নির্দেশিকা ইত্যাদি থেকে স্ট্রিংয়ে মার্কআপ অন্তর্ভুক্ত করতে দেয়:

scope.message = "<strong>42</strong> is the <em>answer</em>.";

শেষ অবধি, কোনও টেমপ্লেটে, এটি অবশ্যই এর মতো আউটপুট হতে হবে:

<p ng-bind-html="message"></p>

কোনটি প্রত্যাশিত আউটপুট উত্পাদন করা হবে: 42 হয় উত্তর ।

Comments

এইচটিএমএল এর মতো কিছু চেষ্টা করুন <div><label>Why My Input Element Missing</label><input /></div>... যদি এটি আপনার অবাক করে তোলে তবে আপনার উত্তরটি plz আপডেট করুন .. কারণ আমি সমস্ত 10 + ভোট সমাধান পরীক্ষা করেছি .. আপনার সমাধানটি আমার ইনপুট ট্যাগগুলি দেখার জন্য কাজ করে নি .. নাহলে .. আমার ব্যবহার ছিল$sce.trustAsHtml(html)

— সামি

এই সমাধান কাজ করে, একটি jsfiddle বা plunkr পোস্ট যত্ন?

— পিয়র-লুক জেনড্রেউ

সর্বশেষ কৌণিক ব্যবহার করা হলে এটি উত্তর হতে হবে

— সন্দীপ

Answer 5

আমি আজ চেষ্টা করেছি, আমি খুঁজে পেলাম একমাত্র উপায় এটি

<div ng-bind-html-unsafe="expression"></div>

Comments

ক্রস সাইট স্ক্রিপ্টিং আক্রমণ এড়াতে যদি উত্সটি বিশ্বাসযোগ্য হয় তবেই এই সমাধানটি ব্যবহার করা উচিত।

— বার্ট্র্যান্ড

কৌণিক 1.0.2 হিসাবে, এটি অন্য কোনও ফাইল বা হুকআপের প্রয়োজন ছাড়া আমার জন্য কাজ করে।

— এনগমেন্ট

কৌণিক 1.0.8 ব্যবহার করে এবং এটি আমার পক্ষে কাজ করে। @ বার্ট্র্যান্ডের সতর্কতার প্রতি মনোযোগ দিন তবে নিশ্চিত হন যে আপনি উত্সটির প্রতি আস্থা রেখেছেন।

— জ্যাক স্লিংগারল্যান্ড

ভবিষ্যতের রেফারেন্সের জন্য এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ 1.2 সংস্করণে সরানো হয়েছে। এখন আপনার ngSanitize মডিউল প্রয়োজন এবং অনিরাপদ এইচটিএমএল বাঁধতে আপনার $ sce.trustAsHtml পদ্ধতিটি ব্যবহার করা উচিত।

— লুকাস লাজারো

Answer 6

ng-bind-html-unsafe আর কাজ করে না

এটি সবচেয়ে সংক্ষিপ্ততম উপায়:

একটি ফিল্টার তৈরি করুন:

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

এবং আপনার দৃষ্টিতে:

<div ng-bind-html="customHtml | unsafe"></div>

পিএস এই পদ্ধতিটির জন্য আপনাকে ngSanitizeমডিউলটি অন্তর্ভুক্ত করতে হবে না ।

Comments

এটি এখানে সেরা সমাধান যা আমি এখানে Angular 1.2 এর জন্য দেখেছি। $sceগৃহীত উত্তরের সাহায্যে সমাধানটি আমার পক্ষে কার্যকর হয়নি এবং আমি এত তুচ্ছ জিনিসের জন্য অতিরিক্ত নির্ভরতা অন্তর্ভুক্ত করতে চাই না।

— ড্যানিয়েল বনেল

বিধান ভট্টরাইয়ের সমাধানটি আমার পক্ষে কাজ করেছিল। কৌণিক 1.6.1

— মিডিয়াগুরু

Answer 7

এইচটিএমএলে

<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

অথবা

<div ng-bind-html="myCtrl.comment.msg"></div

নিয়ামক উপর

mySceApp.controller("myAppController", function myAppController( $sce) {

this.myCtrl.comment.msg = $sce.trustAsHtml(html);

সঙ্গে কাজ করে $scope.comment.msg = $sce.trustAsHtml(html);

Comments

$sceঝরঝরে কিন্তু কোনও ব্যবহারকারী কি এখানে একটি ব্রেকপয়েন্ট যোগ করতে এবং কোনও this.myCtrl.comment.msgডিবাগার ব্যবহার করে কোনও দূষিত কোড পুনরুদ্ধার করতে পারে না ?

— ব্র্যাডগ্রিনস

তারপরে আবার ব্র্যাডগ্রিনস, আপনিও এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ সাথে একই কাজ করতে সক্ষম হবেন?

— CodeOverRide

কেউ যদি সেখানে নিজের ব্রাউজারটি হ্যাক করতে চান তবে কে যত্ন করে। এটি অন্যান্য ব্যবহারকারীর উপর প্রভাব ফেলবে না। @ ব্র্যাডগ্রেন কি এটাই প্রশ্ন?

— ক্রিস স্টিফেনস

পছন্দ করেছেন আমি অনুমান করি যা আমার প্রশ্নের উত্তর দেয় তবে আমার মতে এই বৈশিষ্ট্যগুলি প্রকৃত সুরক্ষার চেয়ে অনুধাবন করা সুরক্ষার কাছাকাছি। সম্ভবত এটি কোনও ধরণের স্বয়ংক্রিয় আক্রমণ থেকে রক্ষা করে? আমি কখনই পরিষ্কার বুঝতে পারি নি কেন এই জিনিসগুলি করা অ্যাপ্লিকেশনটিকে সত্যই সহায়তা করে। আমার অ্যাপ্লিকেশনটিতে উইসইভিগ এইচটিএমএল রেন্ডারিংয়ের প্রতিটি ক্ষেত্রে একটি ফিল্টার যুক্ত করতে হবে কারণ এতে ইনলাইন সিএসএস থাকতে পারে, যা ng-bind-htmlস্ট্রিপসকে ছাড়িয়ে যায়।

— ব্র্যাডগ্রিনস

ভাল এই বৈশিষ্ট্যগুলি সুরক্ষিত কোডিং ভুলগুলি হ্রাস করতে সহায়তা করে। বিশেষত মার্কআপ / কোড ইঞ্জেকশন সহ সমস্যা। ডিফল্টরূপে সমস্ত আবদ্ধ ডেটা প্রদর্শনের জন্য এনকোড করা হয়। সুতরাং মূলত আপনি যদি আউটপুট মার্কআপ করতে চান তবে এটি আপনাকে কী করতে চাইছেন তা ভাবতে বাধ্য করে। এই বৈশিষ্ট্যগুলি ব্যতীত আপনি একা সার্ভার সাইড সুরক্ষা সহ অনেক কিছু করতে পারেন তবে ক্লায়েন্ট অ্যাপ্লিকেশনটিকে প্রদর্শনের জন্য ডেটা সঠিকভাবে পরিচালনা করার জন্য চার্জ করা উচিত separate

— ক্রিস স্টিফেনস

Answer 8

আমি দেখতে পেয়েছি যে এনজি-সানিটাইজ ব্যবহার করে আমাকে এইচটিএমএলে এনজি-ক্লিক যুক্ত করতে দেয়নি।

এটি সমাধান করার জন্য আমি একটি নির্দেশিকা যুক্ত করেছি। এটার মত:

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

এবং এটি এইচটিএমএল:

<htmldiv content="theContent"></htmldiv>

শুভকামনা।

Answer 9

এটি কেবল কৌনিক (v1.4) ডক্স অনুসরণ করে ngBindHtml ব্যবহার করে করেছে ,

<div ng-bind-html="expression"></div> 
and expression can be "<ul><li>render me please</li></ul>"

আপনি মডিউলটির নির্ভরতাগুলিতে ngSanitize অন্তর্ভুক্ত করেছেন তা নিশ্চিত করুন। তাহলে এটা ঠিক কাজ করা উচিত।

Answer 10

স্ক্র্যাপযুক্ত অ্যাট্রিবিউটটি ব্যবহার করা ছাড়া ব্লারব্রির মতোই অন্য একটি সমাধান:

angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
    return {
      restrict: 'E',
      scope: {
        html: '='
      },
      link: function postLink(scope, element, attrs) {

          function appendHtml() {
              if(scope.html) {
                  var newElement = angular.element(scope.html);
                  $compile(newElement)(scope);
                  element.append(newElement);
              }
          }

          scope.$watch(function() { return scope.html }, appendHtml);
      }
    };
  }]);

এবং তারপর

<render-html html="htmlAsString"></render-html>

উল্লেখ্য প্রতিস্থাপন করতে পারি element.append()সঙ্গেelement.replaceWith()

Answer 11

কৌণিক ক্ষেত্রে নতুন বৈশিষ্ট্য বা দিকনির্দেশনা তৈরি করে এই সমস্যার আরও একটি সমাধান রয়েছে ।

পণ্য-specs.html

 <h4>Specs</h4>
        <ul class="list-unstyled">
          <li>
            <strong>Shine</strong>
            : {{product.shine}}</li>
          <li>
            <strong>Faces</strong>
            : {{product.faces}}</li>
          <li>
            <strong>Rarity</strong>
            : {{product.rarity}}</li>
          <li>
            <strong>Color</strong>
            : {{product.color}}</li>
        </ul>

app.js

 (function() {
var app = angular.module('gemStore', []);    
app.directive("     <div ng-show="tab.isSet(2)" product-specs>", function() {
return {
  restrict: 'E',
  templateUrl: "product-specs.html"
};
});

index.html

 <div>
 <product-specs>  </product-specs>//it will load product-specs.html file here.
 </div>

অথবা

<div  product-specs>//it will add product-specs.html file 

অথবা

<div ng-include="product-description.html"></div>

https://docs.angularjs.org/guide/directive

Answer 12

আপনি এনজি-অন্তর্ভুক্তও ব্যবহার করতে পারেন ।

<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>

আপনি এই টেম্পলেট ডেটাটি লুকানোর জন্য "এনজি-শো" ব্যবহার করতে পারেন ।

Comments

আপনি নিশ্চিত যে এনজি-অন্তর্ভুক্ত ব্যবহারের জন্য আপনাকে যা করতে হবে তা এই সমস্ত?

— fauverism

হ্যাঁ .. আমি চেষ্টা করে দেখেছি এবং আপনি যদি টেমপ্লেট ব্যবহার করছেন তবে এটি নিম্নলিখিত উপায়ে ব্যবহার করুন - <স্ক্রিপ্ট টাইপ = "পাঠ্য / এনজি-টেম্পলেট" আইডি = "কাস্টম html">

— বিকাশ শর্মা

Answer 13

সমাধানটি এখানে একটি ফিল্টার তৈরি করুন

.filter('trusted',
   function($sce) {
     return function(ss) {
       return $sce.trustAsHtml(ss)
     };
   }
)

এবং এটিকে এনজি-বাইন্ড-এইচটিএমএল-এর মতো ফিল্টার হিসাবে প্রয়োগ করুন

<div ng-bind-html="code | trusted">

এবং রুবেন ডিক্রপকে ধন্যবাদ জানাই

Answer 14

ব্যবহার

<div ng-bind-html="customHtml"></div>

এবং

angular.module('MyApp', ['ngSanitize']);

তার জন্য, আপনাকে অন্তর্ভুক্ত করা দরকার angular-sanitize.js, উদাহরণস্বরূপ আপনার এইচটিএমএল-ফাইলের সাথে

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>

Answer 15

bind-as-htmlপ্রয়োজনীয়তা ছাড়াই এখানে একটি সহজ (এবং অনিরাপদ) নির্দেশনা রয়েছে ngSanitize:

myModule.directive('bindAsHtml', function () {
    return {
        link: function (scope, element, attributes) {
            element.html(scope.$eval(attributes.bindAsHtml));
        }
    };
});

নোট করুন যে এটি অবিশ্বস্ত সামগ্রীকে বাধ্যতামূলক করে যদি সুরক্ষা সমস্যাগুলির জন্য উন্মুক্ত হবে।

এর মতো ব্যবহার করুন:

<div bind-as-html="someHtmlInScope"></div>

Answer 16

কৌণিক 4 সহ টেমপ্লেটে এইচটিএমএল প্রদর্শনের জন্য পাইপের সাথে কাজ করার উদাহরণ।

1.যুক্ত পাইপ পলায়ন- html.pipe.ts

`

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({name : 'keepHtml', pure : false})
export class EscapeHtmlPipe implements PipeTransform{
 constructor(private sanitizer : DomSanitizer){
 }
 transform(content){
  return this.sanitizer.bypassSecurityTrustHtml(content);
 }
}

`2. app.module.ts এ পাইপ রেজিস্টার করুন

 import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
    declarations: [...,EscapeHtmlPipe]

3. আপনার টেম্পলেট ব্যবহার করুন

       <div class="demoPipe"  [innerHtml]="getDivHtml(obj.header) | keepHtml">

4. getDivHtml() { //can return html as per requirement}

   অনুগ্রহ করে সংশ্লিষ্ট উপাদান.টি ফাইলগুলিতে getDivHtml এর জন্য যথাযথ বাস্তবায়ন যুক্ত করুন।

Comments

আমার ধারণা তিনি নতুন সংস্করণ নয়, অ্যাঙ্গুলারজেএস-এর সাথে কাজ করছেন।

— কুষ্ঠরোগ

Answer 17

কেবল সহজ ব্যবহার [innerHTML], নীচের মত:

<div [innerHTML]="htmlString"></div>

আপনার ব্যবহারের প্রয়োজন আগে ng-bind-html...

Comments

এটি কেবল অ্যাঙ্গুলার (কৌণিক সংস্করণ 2+) এর মধ্যে উপলব্ধ, কৌণিক জেএস (কৌণিক সংস্করণ 1) নয়।

— ste2425

Answer 18

কৌণিক 7 + আয়নিক 4 এ, এইচটিএমএল সামগ্রীগুলি "[অভ্যন্তরীণ এইচটিএমএল]" ব্যবহার করে দেখানো যেতে পারে:

<div [innerHTML]="htmlContent"></div>

আমি আশা করি, এটি আপনাকেও সহায়তা করবে। ধন্যবাদ।

Comments

দয়া করে আমাকে এই কোডটিতে কী ভুল রয়েছে তা বলুন যা এই পোস্টটিকে নিম্নচোট করে দেবে। আমি আমার 2 টি প্রয়োগে এই কোডটি পরীক্ষা করেছি। এটা কাজ করে। আপনার অভিজ্ঞতা ভাগ করুন। অনেক ধন্যবাদ.

— কমলেশ

AngularJS সমান কৌণিক 1.x এর সমান কৌণিক 7 সম্পূর্ণ ভিন্ন কাঠামো

— আ স্ন্যাপ