এনজি-ট্রান্সক্র্লেড কী?

266

আমি স্ট্যাকওভারফ্লোতে এনজি-ট্রান্সক্র্লেড নিয়ে আলোচনা করে বেশ কয়েকটি প্রশ্ন দেখেছি, তবে কেউই সাধারণ মানুষটির শর্তে এটি ব্যাখ্যা করে না।

ডকুমেন্টেশনের বিবরণটি নিম্নরূপ:

সর্বাধিক অভিভাবক নির্দেশকের ট্রান্সক্লোকশন ব্যবহার করে এমন ট্রান্সক্লোডড ডিওএম-এর সন্নিবেশ বিন্দু চিহ্নিতকারী নির্দেশিকা।

এটি মোটামুটি বিভ্রান্তিকর। এনজি-ট্রান্সক্রল্টটি কী করার উদ্দেশ্যে এবং এটি কোথায় ব্যবহার করা যেতে পারে তা কি কেউ সহজ পদে ব্যাখ্যা করতে সক্ষম হবে?

angularjs angularjs-directive transclusion

— কোড হুইস্পেরার
সূত্র

এটি মূলত আপনি নির্দিষ্ট এইচটিএমএল ট্যাগ বা নির্দেশের জন্য যা কিছু সন্নিবেশ করছেন তার জন্য একটি চিহ্নিতকরণ পয়েন্ট point এটি একটি নির্দেশিকা সহ ব্যবহার করুন এবং আপনি এটি আরও ভাল বুঝতে পারবেন।

— za

উত্তর:

492

ট্রান্সক্লোক্ট হ'ল নির্দেশকটির ভিতরে থাকা সমস্ত কিছু ক্যাপচার করতে কৌনিক বলার একটি সেটিংস এবং নির্দেশকের টেম্পলেটে এটি কোথাও _{(যেখানে প্রকৃতপক্ষে ng-transcludeরয়েছে)} ব্যবহার করুন। নির্দেশাবলীর ডকুমেন্টেশনের উপর অন্যান্য উপাদানগুলিকে মোড়ানো এমন একটি নির্দেশিকা তৈরি করার অধীনে এ সম্পর্কে আরও পড়ুন ।

আপনি যদি একটি কাস্টম নির্দেশিকা লিখেন তবে আপনি যে উপাদানটির উপাদানগুলির সারণিটি সন্নিবেশ করতে চান সেখানে চিহ্নিত করতে আপনি এনজি-ট্রান্সক্র্ল্টকে নির্দেশের টেম্পলেটটিতে ব্যবহার করেন

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

যদি আপনি এটি আপনার মার্কআপে রাখেন

<hero name="superman">Stuff inside the custom directive</hero>

এটি প্রদর্শিত হবে:

অতিমানব

কাস্টম নির্দেশের ভিতরে স্টাফ

সম্পূর্ণ উদাহরণ:

Index.html

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

ভিজ্যুয়ালাইজ করুন:

— বেন ফিশার
সূত্র

এটি তাদের অফিসিয়াল ডক্সের চেয়ে অনেক বেশি ভাল বর্ণনা। সে আমার মাথা ব্যাথা করে।

— ক্যাপাজ

দুর্দান্ত উত্তর! :) আপনি যে লিঙ্কটি ভাগ করেছেন তা প্রক্রিয়াটি বুঝতে সহায়তা করে transclude।

— পাওলো অলিভিরা

কৌনিকগুলির কাছে বর্তমানে তাদের থাকা দস্তাবেজের পরিবর্তে এই ব্যাখ্যাটি ব্যবহার করা উচিত।

— জেরেমি ডাব্লু

@ কোডোডনোড এর কৌণিক সংকলন পরিষেবাটি এখানে প্রাসঙ্গিক কোড গিথুব.আঙ্গুলার /angular.js/blob/…

— বেন ফিশার

স্ট্যাকওভারফ্লো উত্তরগুলি কৌণিক ধারণাগুলি

— শ্রীধরকে আন্ডারস্ট্যান্ড

এটি এক ধরণের ফলন, এলিটামেন্ট.ইচটিএমএল () থেকে সমস্ত কিছু সেখানে রেন্ডার হয়ে যায় তবে নির্দেশকের গুণাবলী নির্দিষ্ট স্পেসে এখনও দৃশ্যমান।

— সরবু নিকোলাই-সেজার
সূত্র

আমার মতে শীর্ষের উত্তরটি নিখুঁত, তবে আপনি যদি কোনও রুবি ব্যাকগ্রাউন্ড থেকে এসেছেন তবে আমি সম্মত হচ্ছি, yieldভাল উপমা বলে মনে হচ্ছে।

— এপি

@ এপি হ্যাঁ, আমি একটি রুবি পটভূমি থেকে এসেছি

— সের্বু নিকোলে-সেজার