কাস্টম নির্দেশকের স্কোপ বাইন্ডিংয়ে '@', '&', '=' এবং '>' চিহ্ন ব্যবহার করুন: কৌণিক জেএস


151

অ্যাঙ্গুলারজেএস-এ কাস্টম নির্দেশনা বাস্তবায়নে এই চিহ্নগুলির ব্যবহার সম্পর্কে আমি অনেক কিছু পড়েছি তবে ধারণাটি এখনও আমার কাছে পরিষ্কার নয়। আমি বলতে চাইছি, আমি যদি কাস্টম নির্দেশিকায় স্কোপ মানগুলির একটি ব্যবহার করি তবে এর অর্থ কী?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

এখানে সুযোগ নিয়ে আমরা ঠিক কী করছি?

অফিসিয়াল ডকুমেন্টেশনে "স্কোপ: '>'" আছে কিনা তাও আমি নিশ্চিত নই । এটি আমার প্রকল্পে ব্যবহৃত হয়েছে।

সম্পাদনা করুন -1

"স্কোপ: '>'" এর ব্যবহার আমার প্রকল্পে একটি সমস্যা ছিল এবং এটি স্থির করা হয়েছে।

উত্তর:


116

একটি কৌণিক জেএস নির্দেশিকায় সুযোগটি আপনাকে সেই উপাদানটির বৈশিষ্ট্যগুলিতে ডেটা অ্যাক্সেস করতে দেয় যেখানে নির্দেশ প্রয়োগ করা হয়।

এটি একটি উদাহরণ সহ সেরা চিত্রিত:

<div my-customer name="Customer XYZ"></div>

এবং নির্দেশিকা সংজ্ঞা:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

যখন scopeসম্পত্তি ব্যবহৃত হয় তখন নির্দেশটি তথাকথিত "বিচ্ছিন্ন স্কোপ" মোডে থাকে যার অর্থ এটি পিতামাতার নিয়ন্ত্রকের স্কোপটিতে সরাসরি অ্যাক্সেস করতে পারে না।

খুব সাধারণ ভাষায়, বাইন্ডিং প্রতীকগুলির অর্থ:

someObject: '=' (দ্বিমুখী ডেটা বাঁধাই)

someString: '@'(ডাবল কোঁকড়া ধনুর্বন্ধনী স্বরলিপি সহ প্রত্যক্ষ বা আন্তঃবিবাহের মধ্য দিয়ে উত্তীর্ণ {{}})

someExpression: '&'(যেমন hideDialog())

এই তথ্যটি কৌনিক জেএস নির্দেশিকা ডকুমেন্টেশন পৃষ্ঠাতে উপস্থিত রয়েছে , যদিও কিছুটা পৃষ্ঠায় কিছুটা ছড়িয়ে পড়ে।

প্রতীকটি >সিনট্যাক্সের অংশ নয়।

যাইহোক, AngularJS উপাদান বাইন্ডিংয়ের< অংশ হিসাবে বিদ্যমান এবং এর অর্থ একটি উপায় বাঁধাই।


6
কি হবে @??
হোমার 15

9
এটি লক্ষণীয় হওয়া উচিত যে <1.5 এর উপাদানগুলির সাথে কেবল সামঞ্জস্যপূর্ণ নয়, এটি নির্দেশের সাথেও সামঞ্জস্যপূর্ণ। @Homer ?-এর মানে যেমন অ্যাট্রিবিউট ঐচ্ছিক
জেনস বোদল

171

> নথিতে নেই।

< একমুখী বাধ্যতামূলক জন্য।

@বাঁধাই স্ট্রিং পাস করার জন্য। এই স্ট্রিংগুলি {{}}আন্তঃবিবাহিত মানগুলির জন্য এক্সপ্রেশনকে সমর্থন করে।

=বাইন্ডিং দ্বিমুখী মডেল বাইন্ডিংয়ের জন্য। অভিভাবকের স্কোপের মডেলটি নির্দেশকের বিচ্ছিন্ন সুযোগে মডেলের সাথে যুক্ত।

& বাঁধাই হ'ল কোনও নির্দেশকে আপনার নির্দেশকের স্কোপে যাওয়ার জন্য যাতে এটি আপনার নির্দেশের মধ্যে ডাকতে পারে।

যখন আমরা সুযোগ স্থাপন করি: নির্দেশে সত্য, কৌণিক জেএস সেই নির্দেশের জন্য একটি নতুন সুযোগ তৈরি করে। এর অর্থ নির্দেশিকার ক্ষেত্রের যে কোনও পরিবর্তন প্যারেন্ট কন্ট্রোলারে ফিরে আসে না।


47

< একমুখী বাঁধাই

= দ্বিমুখী বাঁধাই

& ফাংশন বাঁধাই

@ কেবল স্ট্রিং পাস


6
একই উত্তরটি পুনরাবৃত্তি করার জন্য এটি কোনও ধারণা রাখে না, দুঃখিত একই উত্তর নয় এটি উপরের উত্তরগুলি থেকে একটি উত্তোলিত তথ্য বলে মনে হচ্ছে।
ম্যাক

19
কখনও কখনও সংক্ষিপ্ত উত্তর আরও ব্যবহারিক হতে থাকে!
মারওয়েন ট্রাবেলসি

যদি আপনি এটি কয়েকটি সংক্ষিপ্ত লাইনে ব্যাখ্যা করতে পারেন তবে জাঙ্ক তথ্য যুক্ত করার দরকার নেই :)
মারওয়েন ট্রাবেলসি

1
উচ্চতর ভোট দেওয়া বিকল্পগুলির মধ্যে যে কোনও একটিকে নেতৃত্ব দেওয়ার জন্য এডিট হিসাবে এটি আরও ভাল।
এন-এট

3

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

  1. @স্ট্রিং আক্ষরিক, স্ট্রিংয়ের মান, একমুখী বাইন্ডিং ব্যবহার করে ডেটা স্ট্রিং হিসাবে পাস করা যেতে পারে ।
  2. =স্ট্রিং আক্ষরিক, পাস অবজেক্ট, 2 উপায় বাইন্ডিং ব্যবহার করে ডেটা অবজেক্ট হিসাবে পাস করা যেতে পারে ।
  3. তথ্য &স্ট্রিং আক্ষরিক হিসাবে একটি ফাংশন হিসাবে পাস করা যেতে পারে , বহিরাগত ফাংশন কল, নির্দেশিকা থেকে নিয়ামক থেকে ডেটা পাস করতে পারে।

2

নির্দেশনা উপর AngularJS ডকুমেন্টেশন চমত্কার প্রতীক বলতে চাচ্ছি তা জন্য লেখা হয়।

স্পষ্ট করে বলতে গেলে, আপনি ঠিক থাকতে পারবেন না

scope: '@'

একটি নির্দেশিক সংজ্ঞা। আপনার অবশ্যই সেই বৈশিষ্ট্য থাকতে হবে যার জন্য এই বাইন্ডিংগুলি প্রয়োগ হয়, যেমন:

scope: {
    myProperty: '@'
}

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

এখানে মানগুলির সাথে উপরের লিঙ্কযুক্ত পৃষ্ঠা থেকে সরাসরি উদ্ধৃতি দেওয়া হয়েছে scope:

সুযোগের সম্পত্তিটি সত্য, কোনও বস্তু বা মিথ্যা মান হতে পারে:

  • মিথ্যা : নির্দেশের জন্য কোনও সুযোগ তৈরি করা হবে না। নির্দেশিকাটি তার পিতামাতার সুযোগ ব্যবহার করবে।

  • true: নির্দেশকের উপাদানটির জন্য প্রোটোটাইপিকভাবে তার পিতামাতার কাছ থেকে উত্তরাধিকারসূত্রে প্রাপ্ত একটি নতুন শিশু সুযোগ তৈরি করা হবে। যদি একই উপাদানটির একাধিক নির্দেশিকা একটি নতুন সুযোগের জন্য অনুরোধ করে তবে কেবল একটি নতুন সুযোগ তৈরি হয়। নতুন স্কোপ নিয়ম টেমপ্লেটের মূলের জন্য প্রযোজ্য না কারণ টেমপ্লেটের মূলটি সর্বদা একটি নতুন সুযোগ পায়।

  • {...} (একটি বস্তুর হ্যাশ) : নির্দেশকের উপাদানটির জন্য একটি নতুন "বিচ্ছিন্ন" সুযোগ তৈরি করা হয়। 'বিচ্ছিন্ন' স্কোপটি স্বাভাবিক স্কোপ থেকে পৃথক হয় কারণ এটি এর মূল সুযোগ থেকে প্রোটোটাইপিকভাবে উত্তরাধিকার সূত্রে পায় না। পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করার সময় এটি কার্যকর, যা ঘটনাক্রমে প্যারেন্ট স্কোপে ডেটা পড়া বা সংশোধন করা উচিত নয়।

Https://code.angularjs.org/1.4.11/docs/api/ng/service/ থেকে 2017-02-13 থেকে পুনরুদ্ধার করা হয়েছে $ সিসি-বাই-এসএ 3.0 হিসাবে লাইসেন্সযুক্ত # -scope- সংকলন করুন


0

অ্যাঙ্গুলারজেএস 1.6-এর যে কোনও চিহ্নের সাথে মান বন্ড করতে আমার সমস্যা হয়েছিল had আমি কোনও মূল্যই পাইনি, কেবলমাত্র undefined, যদিও আমি একই ফাইলে অন্য বাইন্ডিংয়ের মতো কাজ করেছি।

সমস্যাটি ছিল: আমার পরিবর্তনশীল নামের একটি আন্ডারস্কোর ছিল।

এটি ব্যর্থ:

bindings: { import_nr: '='}

এইটা কাজ করে:

bindings: { importnr: '='}

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

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.