উত্তর:
@
নির্দেশকের অ্যাট্রিবিউটে স্কোলে প্রেরণ করার জন্য নির্দেশকের বৈশিষ্ট্যের উপর নির্ধারিত একটি মানকে অনুমতি দেয়। মানটি একটি সাধারণ স্ট্রিং মান ( myattr="hello"
) হতে পারে বা এটি এম্বেডড এক্সপ্রেশন ( myattr="my_{{helloText}}"
) সহ একটি AngularJS ইন্টারপোলটেড স্ট্রিং হতে পারে । সন্তানের দিকনির্দেশনায় অভিভাবকত্ব থেকে এটি "একমুখী" যোগাযোগ হিসাবে ভাবেন। জন লিন্ডকুইস্টের এগুলির প্রতিটি ব্যাখ্যা করার জন্য একটি সিরিজ শর্ট স্ক্রিনকাস্ট রয়েছে। @ এর স্ক্রিনকাস্টটি এখানে রয়েছে: https://egghead.io/lessons/angularjs-islate-scope-attribute-binding
&
দিকনির্দেশকের বিচ্ছিন্ন সুযোগটি বৈশিষ্ট্যে সংজ্ঞায়িত অভিব্যক্তিতে মূল্যায়নের জন্য প্যারেন্ট স্কোপগুলিতে মানগুলি পাস করার অনুমতি দেয়। মনে রাখবেন যে দিকনির্দেশক বৈশিষ্ট্যটি স্পষ্টতই একটি অভিব্যক্তি এবং ডাবল কোঁকড়ানো ব্রেস এক্সপ্রেশন সিনট্যাক্স ব্যবহার করে না। এটি পাঠ্যতে ব্যাখ্যা করা আরও কঠিন। স্ক্রীনকাস্ট চালু এবং এখানে রয়েছে: https://egghead.io/lessons/angularjs-islate-scope- এক্সপ্রেশন- বাইন্ডিং
=
নির্দেশকের বিচ্ছিন্ন সুযোগ এবং পিতামাতার সুযোগের মধ্যে দ্বি-মুখী আবদ্ধ অভিব্যক্তি সেট আপ করে। সন্তানের সুযোগে পরিবর্তনগুলি পিতামাতাকে এবং এর বিপরীতে প্রচার করা হয়। @ এবং & এর সংমিশ্রণ হিসাবে = ভাবেন। স্ক্রীনকাস্টটি এখানে রয়েছে: https://egghead.io/lessons/angularjs-islate-scope-two-way-binding
এবং অবশেষে এখানে একটি স্ক্রিনকাস্ট যা তিনটিই একক দৃশ্যে একসাথে ব্যবহৃত দেখায়: https://egghead.io/lessons/angularjs-islate-scope-review
আমি জাভাস্ক্রিপ্ট প্রোটোটাইপ উত্তরাধিকারের দৃষ্টিকোণ থেকে ধারণাগুলি ব্যাখ্যা করতে চাই। আশা করি বুঝতে সাহায্য করুন।
নির্দেশনার সুযোগটি নির্ধারণ করার জন্য তিনটি বিকল্প রয়েছে:
scope: false
: কৌণিক ডিফল্ট। দিকনির্দেশনার সুযোগটি তার পিতামাতাদের স্কোপগুলির মধ্যে একটাই (parentScope
) একটি।scope: true
: কৌণিক এই নির্দেশের জন্য সুযোগ তৈরি করে। সুযোগটি মূলত উত্তরাধিকার সূত্রে প্রাপ্ত parentScope
।scope: {...}
: বিচ্ছিন্ন সুযোগটি নীচে ব্যাখ্যা করা হয়েছে। নির্দিষ্ট scope: {...}
করে একটি isolatedScope
। একটি isolatedScope
থেকে উত্তরাধিকারী বৈশিষ্ট্য নয় parentScope
, যদিও isolatedScope.$parent === parentScope
। এটি এর মাধ্যমে সংজ্ঞায়িত করা হয়:
app.directive("myDirective", function() {
return {
scope: {
... // defining scope means that 'no inheritance from parent'.
},
}
})
isolatedScope
এর সরাসরি অ্যাক্সেস নেই parentScope
। তবে কখনও কখনও নির্দেশকের সাথে যোগাযোগ করা প্রয়োজন parentScope
। তারা যোগাযোগ করে @
, =
এবং &
। প্রতীক ব্যবহার সম্পর্কিত বিষয় @
, =
এবং &
ব্যবহারের পরিস্থিতি সম্পর্কে কথা বলছেisolatedScope
।
এটি সাধারণত বিভিন্ন পৃষ্ঠাগুলি যেমন মডেলগুলির দ্বারা ভাগ করা কিছু সাধারণ উপাদানগুলির জন্য ব্যবহৃত হয়। একটি বিচ্ছিন্ন সুযোগ বিশ্বব্যাপী সুযোগকে দূষিত করার প্রতিরোধ করে এবং পৃষ্ঠাগুলির মধ্যে ভাগ করে নেওয়া সহজ।
এখানে একটি মৌলিক নির্দেশনা রয়েছে: http://jsfiddle.net/7t984sf9/5/ । উদাহরণস্বরূপ একটি চিত্র:
@
: একমুখী বাঁধাই@
কেবল থেকে সম্পত্তি পাসের parentScope
জন্য isolatedScope
। এটি বলা হয় one-way binding
, যার অর্থ আপনি parentScope
বৈশিষ্ট্যের মানটি পরিবর্তন করতে পারবেন না । আপনি যদি জাভাস্ক্রিপ্ট উত্তরাধিকারের সাথে পরিচিত হন তবে আপনি সহজেই এই দুটি পরিস্থিতি বুঝতে পারবেন:
যদি বাইন্ডিং সম্পত্তিটি আদিম ধরণের হয়, যেমন interpolatedProp
উদাহরণের মতো: আপনি সংশোধন করতে পারেন interpolatedProp
, তবে parentProp1
পরিবর্তিত হবে না। যাইহোক, যদি আপনি এর মান পরিবর্তন parentProp1
, interpolatedProp
নতুন মান সঙ্গে ওভাররাইট হবে (যখন কৌণিক $ হজম)।
যদি বাইন্ডিং সম্পত্তিটি কিছু অবজেক্ট হয়, যেমন parentObj
: যেহেতু পাশ করা হয়েছে isolatedScope
তা একটি রেফারেন্স, মানটি পরিবর্তন করা এই ত্রুটিটিকে ট্রিগার করবে:
TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}
=
: দ্বিমুখী বাঁধাই=
বলা হয় two-way binding
, যার অর্থ কোনও পরিবর্তনই childScope
এর মান আপডেট করে parentScope
এবং বিপরীতে। এই নিয়ম আদিম এবং বস্তু উভয়ের জন্যই কাজ করে। তোমাদের মধ্যে বাঁধাই টাইপ পরিবর্তন করেন তাহলে parentObj
হতে =
, আপনি যে আপনি মান পরিবর্তন করতে পারেন পাবেন parentObj.x
। একটি সাধারণ উদাহরণ হল ngModel
।
&
: ফাংশন বাঁধাই&
নির্দেশকে কিছু parentScope
ফাংশন কল করতে এবং নির্দেশ থেকে কিছু মান পাস করার অনুমতি দেয় । উদাহরণস্বরূপ, জেএসফিডাল চেক করুন: এবং নির্দেশের সুযোগে ।
নির্দেশে একটি ক্লিকযোগ্য টেমপ্লেট সংজ্ঞায়িত করুন:
<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: ...
।
তথ্যসূত্র: স্কোপগুলি বোঝা
আমার কোলাহল নয়, তবে 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 - বিচ্ছিন্ন Scopes - @ বনাম = বনাম &
ব্যাখ্যা সহ সংক্ষিপ্ত উদাহরণ নীচের লিঙ্কে উপলব্ধ:
http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs
@ - এক উপায় বাঁধাই
নির্দেশে:
scope : { nameValue : "@name" }
দেখুন:
<my-widget name="{{nameFromParentScope}}"></my-widget>
= - দুটি উপায় বাঁধাই
নির্দেশে:
scope : { nameValue : "=name" },
link : function(scope) {
scope.name = "Changing the value here will get reflected in parent scope value";
}
দেখুন:
<my-widget name="{{nameFromParentScope}}"></my-widget>
& - ফাংশন কল
নির্দেশে:
scope : { nameChange : "&" }
link : function(scope) {
scope.nameChange({newName:"NameFromIsolaltedScope"});
}
দেখুন:
<my-widget nameChange="onNameChange(newName)"></my-widget>
সত্যিই এটির বিষয়ে একটি হ্যান্ডেল পেতে আমার অনেকদিনের জাহান্নাম লেগেছে। আমার মূল কথাটি বুঝতে পেরেছিল যে "@" এমন স্টাফের জন্য যা আপনি সিটুতে মূল্যায়ন করতে চান এবং একটি ধ্রুবক হিসাবে "+" আসলে বস্তুটিকেই পাস করার জন্য নির্দেশনার মধ্য দিয়ে গিয়েছিলেন।
আছে: একটা চমৎকার ব্লগ পোষ্টের এই এই ব্যাখ্যা এর http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes