javascript - tutorial - w3schools




AngularJS মধ্যে & বনাম @ এবং=মধ্যে পার্থক্য কি (4)

আমার পাগল নয়, কিন্তু http://jsfiddle.net/maxisam/QrCXh/ পার্থক্য দেখায়। মূল টুকরা হল:

           scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between 
            parent and isolated scope. */                
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }        

আমি AngularJS খুব নতুন। কেউ এই AngularJS অপারেটরদের মধ্যে পার্থক্য ব্যাখ্যা করতে পারে: &, @ and = সঠিক উদাহরণ দিয়ে সুযোগ বিচ্ছিন্ন করার সময়।


আমি জাভাস্ক্রিপ্ট প্রোটোটাইপ উত্তরাধিকার দৃষ্টিকোণ থেকে ধারণা ব্যাখ্যা করতে চাই। আশা করি বুঝতে সাহায্য করুন।

নির্দেশের সুযোগ নির্ধারণ করতে তিনটি বিকল্প রয়েছে:

  1. scope: false : কৌণিক ডিফল্ট। নির্দেশিকা এর সুযোগ তার পিতামাতার সুযোগ ( parentScope ) এক।
  2. scope: true : কৌণিক এই নির্দেশিকা জন্য একটি সুযোগ সৃষ্টি করে। সুযোগ প্রোটোটাইপিকাল parentScope থেকে উত্তরাধিকারী।
  3. scope: {...} : বিচ্ছিন্ন সুযোগ নীচে ব্যাখ্যা করা হয়।

scope: {...} নির্দিষ্টকরণ scope: {...} একটি isolatedScope নির্ধারণ করে। একটি isolatedScope parentScope থেকে সম্পত্তি উত্তরাধিকারী হয় না, যদিও isolatedScope.$parent === parentScope । এটি মাধ্যমে সংজ্ঞায়িত করা হয়:

app.directive("myDirective", function() {
    return {
        scope: {
            ... // defining scope means that 'no inheritance from parent'.
        },
    }
})

parentScope সরাসরি এক্সেস আছে না। কিন্তু কখনও কখনও নির্দেশিকা parentScope সঙ্গে যোগাযোগ করতে parentScope । তারা @ , = এবং & nbsp; মাধ্যমে যোগাযোগ করে। @ , = এবং & চিহ্ন ব্যবহার করে বিষয়গুলি isolatedScope ব্যবহার করে পরিস্থিতি সম্পর্কে কথা বলছে

এটি সাধারণত বিভিন্ন পৃষ্ঠাগুলির দ্বারা ভাগ করা কিছু সাধারণ উপাদানগুলির জন্য ব্যবহৃত হয়, যেমন Modals। একটি বিচ্ছিন্ন সুযোগ বিশ্বব্যাপী দূষণ দূষণ প্রতিরোধ করে এবং পৃষ্ঠাগুলির মধ্যে ভাগ করা সহজ।

এখানে একটি মৌলিক নির্দেশিকা রয়েছে: http://jsfiddle.net/7t984sf9/5/ । একটি চিত্র চিত্রিত করা হয়:

@ : এক-উপায় বাঁধাই

@ কেবল parentScope থেকে isolatedScope parentScope সম্পত্তিটি পাস করে। এটি one-way binding বলা হয়, যার অর্থ আপনি parentScope বৈশিষ্ট্যগুলির মান পরিবর্তন করতে পারবেন না। আপনি যদি জাভাস্ক্রিপ্ট উত্তরাধিকারের সাথে পরিচিত হন, তবে আপনি এই দুইটি দৃশ্য সহজেই বুঝতে পারেন:

  • যদি বাঁধাই করা সম্পত্তিটি একটি আদিম টাইপ, উদাহরণস্বরূপ interpolatedProp মতো: আপনি interpolatedProp পরিবর্তন করতে পারেন তবে parentProp1 পরিবর্তন করা হবে না। যাইহোক, আপনি যদি parentProp1 এর মান পরিবর্তন করেন তবে interpolatedProp নতুন মান (যখন কৌণিক $ ডাইজেস্ট) দিয়ে ওভাররাইট করা হবে।

  • যদি বন্ধকী সম্পত্তিটি কিছু বস্তু, parentObj মত parentObj : যেহেতু একটিকে isolatedScope parentObj প্রেরণ করা হয় একটি রেফারেন্স, মান পরিবর্তন করা এই ত্রুটিটিকে ট্রিগার করবে:

    TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}

= : দুই-উপায় বাঁধাই

= two-way binding বলা হয়, যার অর্থ childScope কোনও পরিবর্তন childScope মানটি আপডেট করবে এবং এর বিপরীতে। এই নিয়ম primitives এবং বস্তু উভয় জন্য কাজ করে। আপনি parentObj এর বাঁধাইয়ের ধরনটি = হতে পরিবর্তন করুন, আপনি এটি দেখতে পাবেন যে আপনি parentObj.x এর মান পরিবর্তন করতে পারেন। একটি আদর্শ উদাহরণ ngModel

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

& কিছু parentScope ফাংশন কল করার নির্দেশিকা এবং নির্দেশিকা থেকে কিছু মান পাস করার অনুমতি দেয়। উদাহরণস্বরূপ, JSFiddle চেক করুন: এবং নির্দেশিকা দশা

নির্দেশিকাতে একটি ক্লিকযোগ্য টেম্পলেট সংজ্ঞায়িত করুন:

<div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})">

এবং নির্দেশ মত ব্যবহার করুন:

<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>

পরিবর্তনশীল মান valueFromDirective নির্দেশিকা থেকে অভিভাবক নিয়ামক থেকে {valueFromDirective: ... মাধ্যমে {valueFromDirective: ...

রেফারেন্স: স্কোপ বোঝা


@ নির্দেশিকাটির বিচ্ছিন্নতার দিক থেকে নির্ধারিত নির্দেশক বৈশিষ্ট্যতে একটি মান সংজ্ঞায়িত করে। মান একটি সাধারণ স্ট্রিং মান হতে পারে ( myattr="hello" ) অথবা এটি এমবেডেড এক্সপ্রেশনগুলির সাথে একটি AngularJS ইন্টারপোলেড স্ট্রিং হতে পারে ( myattr="my_{{helloText}}" )। এটি সন্তানের নির্দেশে পিতামাতার সুযোগ থেকে "একরকম" যোগাযোগ হিসাবে মনে করুন। জন Lindquist এই প্রতিটি ব্যাখ্যা ব্যাখ্যা সংক্ষিপ্ত পর্দার একটি সিরিজ আছে। @ স্ক্রিনকাস্ট এখানে রয়েছে: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

& গুণগতভাবে নির্ধারিত অভিব্যক্তিটির মূল্যায়নের জন্য অভিভাবকের সুযোগের মানগুলি পাস করার নির্দেশের বিচ্ছিন্ন সুযোগকে অনুমতি দেয়। লক্ষ্য করুন যে নির্দেশিকা বৈশিষ্ট্যটি একটি অভিব্যক্তি এবং এটি দ্বৈত কোঁকড়া ব্য्रेस এক্সপ্রেশন সিনট্যাক্স ব্যবহার করে না। এই টেক্সট টেক্সট ব্যাখ্যা কঠিন। স্ক্রিনকাস্ট এখানে এবং এখানে: https://egghead.io/lessons/angularjs-isolate-scope-expression-binding বাইন্ডিং

= নির্দেশিকা এর বিচ্ছিন্ন সুযোগ এবং অভিভাবক সুযোগ মধ্যে একটি দ্বি-উপায় বাঁধাই অভিব্যক্তি সেট আপ। সন্তানের সুযোগ পরিবর্তন পিতামাতার প্রচারিত হয় এবং বিপরীত। @ এবং & এর সমন্বয় হিসাবে চিন্তা করুন। স্ক্রিনকাস্ট চালু = এখানে: https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding বাইন্ডিং

এবং অবশেষে এখানে একটি স্ক্রিনকাস্ট যা তিনটি একক দর্শনে একসাথে ব্যবহৃত দেখায়: https://egghead.io/lessons/angularjs-isolate-scope-review


@ : এক-উপায় বাঁধাই

= : দুই-উপায় বাঁধাই

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





angularjs