নির্দেশের সংজ্ঞাটির ট্রান্সক্লোক বিকল্পটি বোঝা?

Question

আমি মনে করি এঙ্গুলারজ এর নির্দেশিকা সহ এটি আমার পক্ষে উপলব্ধি করা সবচেয়ে কঠিন ধারণা।

থেকে দস্তাবেজ Http://docs.angularjs.org/guide/directive বলে:

প্রতিলিপি - উপাদানটির বিষয়বস্তু সংকলন করুন এবং এটি নির্দেশকে উপলভ্য করুন। সাধারণত এনজিআর ট্রান্সক্র্লেড সহ ব্যবহৃত হয়। ট্রান্সক্লুশনের সুবিধা হ'ল লিঙ্কিং ফাংশনটি একটি ট্রান্সক্লুশন ফাংশন গ্রহণ করে যা সঠিক স্কোপের প্রাক-আবদ্ধ। একটি সাধারণ সেটআপে উইজেটটি একটি বিচ্ছিন্ন সুযোগ তৈরি করে, তবে স্থানান্তর কোনও শিশু নয়, বিচ্ছিন্ন সুযোগের ভাইবোন ling এটি উইজেটের পক্ষে ব্যক্তিগত অবস্থা এবং ট্রান্সক্লুশনের পিতা-মাতার (প্রাক-বিচ্ছিন্ন) সুযোগের সাথে আবদ্ধ হওয়া সম্ভব করে।

• সত্য - নির্দেশের বিষয়বস্তু প্রতিলিপি দিন।
• 'উপাদান' - নিম্ন অগ্রাধিকারে সংজ্ঞায়িত কোনও নির্দেশাবলী সহ পুরো উপাদানকে প্রতিলিপি দিন।

এটি transcludeসাধারণত ব্যবহৃত হয় বলে ngTransclude। কিন্তু এনজিস্ট্রান্সক্লুডের ডক থেকে নমুনা ব্যবহার করে নাngTransclude নির্দেশিকা ।

আমাকে এটি বুঝতে সহায়তা করার জন্য আমি কয়েকটি ভাল উদাহরণ চাই। কেন এটা আমাদের দরকার? এটি কী সমাধান করে? এটি কিভাবে ব্যবহার করতে?

Comments

এফওয়াইআই ... লিঙ্কটি এখন কমপক্ষে কাজ করছে

— স্যান্ডি

Answer 1

কোনও উপাদানটিতে মাই ডাইরেক্টিভ নামে একটি নির্দেশনা বিবেচনা করুন এবং সেই উপাদানটি অন্য কিছু সামগ্রী আবদ্ধ করছে, আসুন বলি:

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

যদি মাই ডাইরেক্টিভ কোনও টেম্পলেট ব্যবহার করে থাকে তবে আপনি দেখতে পাবেন যে বিষয়বস্তুটি <div my-directive>আপনার নির্দেশিক টেম্পলেট দ্বারা প্রতিস্থাপন করা হবে। সুতরাং হচ্ছে:

app.directive('myDirective', function(){
    return{
        template: '<div class="something"> This is my directive content</div>'
    }
});

এই রেন্ডার ফলাফল হবে:

<div class="something"> This is my directive content</div> 

লক্ষ্য করুন যে আপনার আসল উপাদানটির সামগ্রী <div my-directive> হারিয়ে যাবে (বা আরও ভালভাবে বলা হয়েছে, প্রতিস্থাপন করা হবে)। সুতরাং, এই বন্ধুদের বিদায় জানান:

<button>some button</button>
<a href="#">and a link</a>

সুতরাং, আপনি যদি নিজের <button>...এবং <a href>...ডোমে রাখতে চান তবে কী হবে ? আপনার ট্রান্সক্লুশন নামে কিছু প্রয়োজন হবে। ধারণাটি বেশ সহজ: সামগ্রীটি এক জায়গা থেকে অন্য জায়গায় অন্তর্ভুক্ত করুন । সুতরাং এখন আপনার নির্দেশিকাটি এর মতো দেখতে পাবেন:

app.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
    }
});

এটি রেন্ডার করবে:

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>. 

উপসংহারে, আপনি যখন কোনও নির্দেশিকা ব্যবহার করেন তখন আপনি মূলত কোনও উপাদানটির বিষয়বস্তু সংরক্ষণ করতে চান যখন আপনি মূলত ট্রান্সক্লোক্ট ব্যবহার করেন।

আমার কোড উদাহরণ এখানে । এছাড়াও আপনি পর্যবেক্ষক থেকে উপকৃত হতে পারে এই ।

Comments

দেখে মনে হচ্ছে তারা কার্যকারিতাটি কিছুটা বদলেছে। কমপক্ষে সংস্করণে> = 1.2.9। টেমপ্লেট থেকে লিখিত সামগ্রীগুলিতে সামগ্রী যুক্ত করা হয় না। নীচে @ টেকএক্সপ্লোরারের উত্তর দেখুন

— টার্জি রোমটভিট

একটি খুব, খুব ভাল উত্তর। স্বাভাবিকের ওপরে। আপনার কাছে ভাল উদাহরণ রয়েছে এবং আপনার "এটি আমার নির্দেশিক সামগ্রী" রেন্ডার সংস্করণে পড়া খুব সহজ করে তুলেছে। আমি বুঝতে পারি না কেন কৌনিকটি জটিল পরিভাষা এবং ধারণাগুলি ব্যবহার করতে হবে এবং তারপরে আপনার মতো সহজে বোঝার উদাহরণগুলি অন্তর্ভুক্ত করবে না। +২

— ফ্রিল

স্থানান্তরিত সামগ্রীটি নির্দেশকের বিচ্ছিন্ন সুযোগ ক্ষেত্রগুলিকে উল্লেখ করতে পারে কিনা তা কি কেউ জানেন? এটি উপরে বলেছে যে প্রতিলিপিটি একটি ভাইবোনের, একটি শিশু নয়, বিচ্ছিন্ন সুযোগের ... তাই আমি ধরে নিচ্ছি এটি এটি সম্ভব নয় - তবে ভাবছিলাম যে কেউ যদি এটি সম্ভব কিনা তা নিশ্চিত করতে বা আমাকে জানাতে পারে

— সাইমন গ্রিন

@ উলাদজিমিরহ্যাভেনচাইক ধন্যবাদ, তারা ভিডিওটিকে অন্য জায়গায় সরিয়ে নিয়েছে। আমি সেই অনুযায়ী লিঙ্কটি ঠিক করেছি।

— ওডিজিও

@ ওডিসিও, আপনি দয়া করে এই জাতীয়টি বোঝার জন্য সমস্ত কৌনিক ডকগুলি সরলভাবে লিখতে পারেন! অনেকগুলি 1

— ড্যান হডসন 11

Answer 2

আমি মনে করি অ্যাঙ্গুলারজেএস-এর নতুন সংস্করণে উপরের আচরণের পরিবর্তনগুলি উল্লেখ করা গুরুত্বপূর্ণ। আমি কৌনিক 1.2.10 দিয়ে উপরের ফলাফলগুলি অর্জনের চেষ্টা করে এক ঘন্টা ব্যয় করেছি।

এনজি-ট্রান্সক্র্লুক্ট সহ উপাদানটির উপাদানগুলি যুক্ত করা হয় না তবে সম্পূর্ণ প্রতিস্থাপন করা হয়।

সুতরাং উপরের উদাহরণে, আপনি 'প্রতিলিপি' দিয়ে কী অর্জন করবেন তা হ'ল:

<div class="something">
    <button>some button</button>
    <a href="#">and a link</a>
</div>

এবং না

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>

ধন্যবাদ।

Comments

কৌণিক 1.2 তে পরিবর্তিত আচরণ সম্পর্কে আরও তথ্যের জন্য eed299a পরিবর্তন দেখুন ।

— রাজকক

Answer 3

টেকএক্সপ্লোরার যা বলেন তা সত্য তবে আপনার টেম্পলেটটিতে এনজি-ট্রান্সক্র্লিউট বৈশিষ্ট্যের সাথে একটি সাধারণ ধারক ট্যাগ (ডিভ বা স্প্যানের মতো) অন্তর্ভুক্ত করে উভয় সামগ্রী থাকতে পারে have এর অর্থ হল আপনার টেমপ্লেটে নিম্নলিখিত কোডগুলিতে সমস্ত সামগ্রী অন্তর্ভুক্ত করা উচিত

<div class="something"> This is my directive content <div class="something" ng-transclude></div></div>

Comments

অন্যান্য উত্তরগুলি অনুপস্থিত ছিল এটিই মূল তথ্য ছিল

— ম্যাথিউস

এই উত্তর এত তথ্য যোগ করে। ng-transcludeসেই বৈশিষ্ট্যটি যা স্থানধারক হিসাবে কাজ করে, এর ভিতরে ট্রান্সক্লসড সামগ্রী রাখা হবে।

— বিয়িংসমান

Answer 4

উইকি থেকে:

"কম্পিউটার বিজ্ঞানে, প্রতিলিপি হ'ল অংশ বা সমস্ত বৈদ্যুতিন নথির এক বা একাধিক অন্যান্য নথিতে রেফারেন্স সহ অন্তর্ভুক্তি।"

আমি ট্রান্সক্লুশনের জন্য আরেকটি ব্যবহার যুক্ত করতে চাই এবং তা হ'ল এটি পিতামাতার ও সন্তানের নির্দেশের সংকলন এবং লিঙ্ক ফাংশনগুলির সম্পাদনের ক্রম পরিবর্তন করে। আপনি যখন পিতা বা মাতা DOM হিসাবে চাইল্ড ডিওএম সংকলন করতে চান তখন এটি কার্যকর হতে পারে সম্ভবত ডিওএম সন্তানের উপর নির্ভরশীল। এই নিবন্ধটি আরও গভীরতর হয় এবং এটি খুব ভালভাবে স্পষ্ট করে!

http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives-part-2-transclusion/

Answer 5

আপডেট করা হয়েছে AngularJS 1.6.6 ডকুমেন্টেশন এখন একটি ভাল ব্যাখ্যা রয়েছে।

ট্রান্সক্লোক্ট এমন একটি নির্দেশিকা তৈরি করতে ব্যবহৃত হয় যা অন্যান্য উপাদানগুলিকে আবৃত করে

কখনও কখনও স্ট্রিং বা কোনও অবজেক্টের চেয়ে পুরো টেমপ্লেটে পাস করতে সক্ষম হওয়া বাঞ্চনীয়। ধরা যাক আমরা একটি "ডায়লগ বক্স" উপাদান তৈরি করতে চাই। কথোপকথন বাক্সে যেকোন স্বেচ্ছাসেবী সামগ্রী মুছতে সক্ষম হওয়া উচিত।

এটি করার জন্য, আমাদের ট্রান্সক্লোক বিকল্পটি ব্যবহার করতে হবে । নীচের উদাহরণ দেখুন।

---

script.js

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.name = 'Tobias';
}])
.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function(scope) {
      scope.name = 'Jeff';
    }
  };
});

index.html

<div ng-controller="Controller">
  <my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>

আমার-dialog.html

<div class="alert" ng-transclude></div>

সংকলিত আউটপুট

<div ng-controller="Controller" class="ng-scope">
  <my-dialog class="ng-isolate-scope"><div class="alert" ng-transclude="">Check out the contents, Tobias!</div></my-dialog>
</div>

---

ট্রান্সক্লোক্টটি এই বিকল্পের সাহায্যে কোনও নির্দেশকের বিষয়বস্তুকে ভিতরে না দিয়ে নির্দেশের বাইরের সুযোগে অ্যাক্সেস দেয়।

এটি পূর্ববর্তী উদাহরণে চিত্রিত হয়েছে। লক্ষ্য করুন যে আমরা স্ক্রিপ্ট.জেজে একটি লিঙ্ক ফাংশন যুক্ত করেছি যা নামটিকে জেফ হিসাবে নতুনভাবে সংজ্ঞায়িত করে। সাধারণত, আমরা আশা করব যে ff {নাম} Je জেফ হবে। তবে আমরা এই উদাহরণে দেখতে পাই যে {{নাম}} বাঁধাই এখনও টোবিয়াস ias

সেরা অনুশীলন : transclude: trueআপনি যখন স্বেচ্ছাসেবী বিষয়বস্তু মোড়ক এমন কোনও নির্দেশিকা তৈরি করতে চান কেবল তখনই ব্যবহার করুন ।

Answer 6

প্রতিলিপি: আপনার নির্দেশের টেম্পলেট উপাদানগুলির সাথে আপনার নির্দেশিকায় সংজ্ঞায়িত সমস্ত উপাদান যুক্ত করার সত্যিকার অর্থ।

যদি প্রতিলিপি: মিথ্যা এই উপাদানগুলি আপনার নির্দেশের চূড়ান্ত এইচটিএমএল অন্তর্ভুক্ত নয় কেবলমাত্র নির্দেশের টেমপ্লেট রেন্ডার করা হয়।

প্রতিলিপি: উপাদানটির অর্থ আপনার নির্দেশক টেম্পলেটটি কেবলমাত্র আপনার নির্দেশিকায় সংজ্ঞায়িত উপাদান হিসাবে ব্যবহৃত হয় না এটি এইচটিএমএল হিসাবে রেন্ডার করা হয়।

আপনি যখন আপনার নির্দেশকে সংজ্ঞায়িত করেন তখন এটি E এর মধ্যে সীমাবদ্ধ হওয়া উচিত এবং আপনি যখন পৃষ্ঠাটিতে যুক্ত করবেন তখন

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.