কখন কণিকাতে ট্রান্সক্লোকড 'ট্রু' এবং ট্রান্সক্লুড 'এলিমেন্ট' ব্যবহার করবেন?

Question

আমি কখন transclude: 'true'এবং কখন ব্যবহার করব transclude: 'element'? transclude: 'element'কৌণিক ডক্সে আমি কিছুই খুঁজে পাচ্ছি না , তারা বেশ বিভ্রান্তিকর।

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

এটি আমি খুঁজে পেয়েছি:

transclude: true

একটি সংকলন ফাংশনের অভ্যন্তরে, আপনি ট্রান্সক্লোক্ট লিঙ্কিং ফাংশনটির সাহায্যে ডিওএমকে ম্যানিপুলেট করতে পারেন বা আপনি যে কোনও এইচটিএমএল ট্যাগে এনজিস্ট্রান্সক্লুড ডাইরেক্টিভ ব্যবহার করে ট্রান্সক্লোকড ডিওএম টেম্পলেটে প্রবেশ করতে পারেন।

এবং

transclude: ‘element’

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

Answer 1

দিকনির্দেশগুলিতে অ্যাঙ্গুলারজেএস ডকুমেন্টেশন থেকে :

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

true - নির্দেশের বিষয়বস্তু প্রতিলিপি দিন।

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

প্রতিচ্ছবি: সত্য

সুতরাং আসুন আমরা বলি যে আপনার কাছে এমন একটি নির্দেশ রয়েছে যার my-transclude-trueসাথে transclude: trueএটি ঘোষিত হয় :

<div>
  <my-transclude-true>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-true>
</div>

সংকলনের পরে এবং লিঙ্ক করার আগে এটি হয়ে যায়:

<div>
  <my-transclude-true>
    <!-- transcluded -->
  </my-transclude-true>
</div>

বিষয়বস্তু (শিশু) এর my-transclude-trueযা হয় <span>{{ something }}</span> {{..., প্রতিলিপ্ত এবং নির্দেশ জন্য উপলব্ধ আছে।

প্রতিলিপি: 'উপাদান'

যদি আপনার কাছে এমন নির্দেশ বলে my-transclude-elementঘোষণা করা হয় transclude: 'element'যা দেখে মনে হয়:

<div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

সংকলনের পরে এবং লিঙ্ক করার আগে এটি হয়ে যায়:

<div>
   <!-- transcluded -->
</div>

এখানে, তার শিশু সহ পুরো উপাদানটি প্রতিলিপি করা হয়েছে এবং নির্দেশকে উপলভ্য করা হয়েছে।

সংযোগের পরে কী ঘটে?

ট্রান্সক্লোকশন ফাংশনটির সাথে এটি করার দরকার তা করার জন্য এটি আপনার নির্দেশিকার অবধি। ngRepeatব্যবহার করে transclude: 'element'যাতে সুযোগটি পরিবর্তিত হয়ে পুরো উপাদান এবং তার শিশুদের পুনরাবৃত্তি করতে পারে। তবে, যদি আপনাকে কেবল ট্যাগটি প্রতিস্থাপন করতে হয় এবং এটির বিষয়বস্তু ধরে রাখতে চান, আপনি transclude: trueযে ngTranscludeনির্দেশনাটি এটি করেন এটি দিয়ে আপনি ব্যবহার করতে পারেন ।

Comments

আমি made available to the directiveবিবৃতি মিস করছি । উপাদানটি সর্বদা নির্দেশের জন্য উপলব্ধ। আপনি কি এই সম্পর্কে বিস্তারিত বলতে পারেন?

— লোক মোগ্রাবি

@ গাইমোগ্রাবি এই বাক্যটি " সঠিক ক্ষেত্রের পূর্ব-সীমিত কোনও ফাংশনের মাধ্যমে নির্দেশকে উপলব্ধ করা হয়েছে" হিসাবে আরও বেশি অর্থবোধ করতে পারে ।

— মিশেল টিলি

কীভাবে একটি ইউনিট 'এলিমেন্ট' সমান ট্রান্সক্লোকড সহ একটি নির্দেশিকা পরীক্ষা করবে? আমি বর্তমানে এই সমস্যাটির সাথে লড়াই করছি। উপাদানটি প্রতিলিপিযুক্ত হওয়ার পরে আমি অ্যাক্সেস করতে পারি না।

— চেস্টার রিভাস

Answer 2

সত্য হিসাবে সেট করা হলে, নির্দেশটি মূল সামগ্রীটি মুছে ফেলবে, তবে এটি এনজি-ট্রান্সক্র্লট নামক একটি নির্দেশকের মাধ্যমে আপনার টেমপ্লেটের মধ্যে পুনরায় প্রবেশের জন্য উপলব্ধ করবে।

appModule.directive('directiveName', function() {
    return {
      template: '<div>Hello there <span ng-transclude></span></div>',
      transclude: true
    };
});


<div directive-name>world</div>

ব্রাউজার রেন্ডার: "ওহে ওয়ার্ল্ড।"

Comments

এই সব প্রশ্নগুলি (যা মধ্যে পার্থক্য সম্পর্কে ছিল উত্তর না transclude: trueএবং transclude: element)

— জ্যাসপার

এছাড়াও আকর্ষণীয় বিষয়টি হ'ল নির্দেশকের পরে ব্রাউজারের

— ডিওএমএল ট্যাগগুলি

Answer 3

ট্রান্সমোলেশন সম্পর্কে চিন্তাভাবনার সর্বোত্তম উপায় হ'ল একটি চিত্র ফ্রেম A একটি চিত্রের ফ্রেমের নিজস্ব নকশা এবং ছবি যুক্ত করার জন্য একটি জায়গা রয়েছে what আমরা কোন ছবিটির ভিতরে যাব তা আমরা সিদ্ধান্ত নিতে পারি।

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

angular.module("app").directive('myFrame', function () {
    return {
        restrict: 'E',
        templateUrl:"frame.html",
        controller:function($scope){
          $scope.hidden=false;
          $scope.close=function(){
            $scope.hidden=true;

          }
        },
        transclude:true


    }

});

নির্দেশের ভিতরে সামগ্রী

<div class="well" style="width:350px;" ng-hide="hidden">

  <div style="float:right;margin-top:-15px">
    <i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i> 
  </div>
  <div ng-transclude>
    /*frame content goes here*/
  </div>
</div>

নির্দেশকে কল করুন

<body ng-controller="appController">
    <my-frame>
      <span>My Frame content</span>
    </my-frame>
  </body>

উদাহরণ

Comments

তবুও আমি প্রতিলিপিটি বুঝতে পারি নি, এটির উদাহরণ দেওয়ার জন্য আপনার কোনও সাধারণ প্রোগ্রাম থাকতে পারে?

— রাজা