কাস্টম অ্যাঙ্গুলারজেএস নির্দেশনার জন্য 'প্রতিস্থাপন' বৈশিষ্ট্যটি কীভাবে ব্যবহার করবেন?


92

কেন replace=trueবা replace=falseনিচের কোড যে কোন প্রভাব ফেলতে না?

প্রতিস্থাপন = মিথ্যা বলার সময় কেন "কিছু বিদ্যমান সামগ্রী" প্রদর্শিত হচ্ছে না?

বা এটিকে আরও বিনীতভাবে রেখে, আপনি কী দয়া করে দয়া replace=true/falseকরে নির্দেশের বৈশিষ্ট্যটি কী এবং কীভাবে এটি ব্যবহার করবেন তা ব্যাখ্যা করতে পারেন?

উদাহরণ

জেএস / কৌণিক:

<script>
    angular.module('scopes', [])
          .controller('Ctrl', function($scope) {
                $scope.title = "hello";

          })
          .directive('myDir', function() {
            return {
              restrict: 'E',
              replace: true,
              template: '<div>{{title}}</div>'
            };
      });
</script>

এইচটিএমএল:

<div ng-controller="Ctrl">
    <my-dir><h3>some existing content</h3></my-dir>
</div>

এটি এখানে প্লঙ্কারে দেখুন:

http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p= পূর্বরূপ


4
@ জর্জিওগ এটিকে অন্য প্রশ্নের নকল হিসাবে চিহ্নিত করেছে যা এই প্রশ্নের চেয়ে পরবর্তী সময়ে জিজ্ঞাসা / উত্তর দেওয়া হয়েছিল।
কেয়া টোস্ট

উত্তর:


189

আপনি যখন replace: trueনিম্নলিখিত ডোম এর টুকরা পেতে:

<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

যদিও, replace: falseআপনি এটি পেয়েছেন:

<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

সুতরাং replaceনির্দেশাবলীর সম্পত্তিটি নির্দেশ করে যে উপাদানটিতে নির্দেশটি প্রয়োগ করা হচ্ছে ( <my-dir>সেই ক্ষেত্রে) সেই উপাদানটি থাকা উচিত ( replace: false) এবং নির্দেশকের টেমপ্লেটটিকে তার শিশু হিসাবে সংযোজন করা উচিত ,

বা

যে উপাদানটিতে নির্দেশিকা প্রয়োগ করা হচ্ছে সেটিকে নির্দেশকের টেমপ্লেট দ্বারা প্রতিস্থাপন করা উচিত ( replace: true)।

উভয় ক্ষেত্রেই উপাদানটির (যার প্রতি নির্দেশটি প্রয়োগ করা হচ্ছে) শিশুরা হারিয়ে যাবে। আপনি যদি উপাদানটির মূল বিষয়বস্তু / শিশুদের অবিচলিত রাখতে চান তবে আপনাকে এটি স্থানান্তর করতে হবে। নিম্নলিখিত নির্দেশাবলী এটি করবে:

.directive('myDir', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div>{{title}}<div ng-transclude></div></div>'
    };
});

সেক্ষেত্রে যদি নির্দেশকের টেমপ্লেটে আপনার কোনও উপাদান (বা উপাদান) বৈশিষ্ট্যযুক্ত থাকে ng-transclude, তবে এর বিষয়বস্তু মূল উপাদানটির (যেদিকে নির্দেশিকা প্রয়োগ করা হচ্ছে) দ্বারা প্রতিস্থাপন করা হবে।

স্থানান্তরের উদাহরণ দেখুন http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p= পূর্বরূপ

দেখুন এই translusion সম্পর্কে আরও পড়তে।


6
এটি একটি আশ্চর্যজনক সহজ ব্যাখ্যা। এবং প্রতিলিপিটিও পরিষ্কার করার জন্য একগুচ্ছকে ধন্যবাদ
কেয়া টোস্ট

আরও গুরুত্বপূর্ণ বিষয়, কেন এটি ডকস.অঙ্গুলারজেএস.আর.গুয়েড / নির্দেশিকাতে ব্যাখ্যা করা হয়নি এবং কেন এই উত্তরটি বিষয়ের একটি নির্দিষ্ট উত্তরের সাথে লিঙ্ক দেয় না?
ত্রিঞ্জাজ

4
অ্যাঙ্গুলারজেএস replaceভি ১.৩ ( লিঙ্ক ) থেকে ত্রিঞ্জাজকে অবহেলা করা হয়েছে ।
টুনি ডি।

33

replace:true অবমানিত হয়

দস্তাবেজ থেকে:

replace ([অগ্রাহ্য!], পরবর্তী বড় রিলিজ - অর্থাৎ v2.0 এ সরানো হবে)

টেমপ্লেটটি কী প্রতিস্থাপন করবে তা উল্লেখ করুন। ডিফল্ট false

  • true - টেমপ্লেটটি নির্দেশকের উপাদানটিকে প্রতিস্থাপন করবে।
  • false - টেমপ্লেটটি নির্দেশকের উপাদানগুলির বিষয়বস্তুগুলিকে প্রতিস্থাপন করবে।

- AngularJS সমন্বিত দিকনির্দেশক এপিআই

গিটহাব থেকে:

Caitp-- এটি অবহিত করা হয়েছে কারণ এর সাথে পরিচিত, খুব নিরীহ সমস্যা replace: trueরয়েছে যার মধ্যে বেশিরভাগই সত্যিকারের যুক্তিসঙ্গত ফ্যাজে স্থির হতে পারে না। যদি আপনি সাবধান হন এবং এই সমস্যাগুলি এড়াতে পারেন তবে আপনার কাছে আরও শক্তি but

- কৌণিক জেএস ইস্যু # 7636


হালনাগাদ

দ্রষ্টব্য: replace: trueঅবহিত এবং ব্যবহারের জন্য প্রস্তাবিত নয়, মূলত এখানে তালিকাভুক্ত সমস্যাগুলির কারণে। এটি সম্পূর্ণ নতুন কৌণিকালে সরানো হয়েছে।

প্রতিস্থাপন সহ সমস্যাগুলি: সত্য

আরও তথ্যের জন্য, দেখুন


4
আমি পড়তে থাকি যে এটি কৌনিক 2 এ অনানুষ্ঠানিকভাবে সমর্থিত হওয়ার কথা, তবে কীভাবে এটি সক্রিয় করা যায় তা আমি বুঝতে পারি না। কেউ আমাকে বলতে পারেন সিনট্যাক্স কী?
ডিভাইস 1

@devios আমি আমার MDL উপাদান জন্য যেমন জিনিস প্রয়োজন কিন্তু বর্তমানে ব্যবহার remove-hostকার্যসংক্রান্ত stackoverflow.com/questions/34280475/... যদি আপনি খুঁজে বের সম্পর্কে সক্রিয় replace: trueA2 এর দিন আমাদের জানান।
kuncevic.dev
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.