AngularJS কন্ট্রোলার এ 'এই' বনাম $ সুযোগ

angularjs-scope this (5)

"AngularJS কন্ট্রোলারগুলিতে this এবং $scope কীভাবে কাজ করে?"

সংক্ষিপ্ত উত্তর :

• this
  • যখন নিয়ামক গঠনকারী ফাংশন বলা হয়, this নিয়ামক হয়।
  • যখন $scope বস্তুতে সংজ্ঞায়িত কোনও ফাংশন বলা হয়, তখন এটি "কার্যক্ষেত্র হিসাবে কার্যকর হওয়ার সুযোগ" হয়। এটি (অথবা নাও!) $scope ফাংশন হতে পারে যা ফাংশনটি সংজ্ঞায়িত করা হয়। সুতরাং, ফাংশন ভিতরে, this এবং $scope একই হতে পারে না ।
• $scope
  • প্রতিটি নিয়ামক একটি যুক্ত $scope বস্তু আছে।
  • একটি নিয়ামক (কন্সট্রাকটর) ফাংশন তার সংশ্লিষ্ট $scope মডেল বৈশিষ্ট্য এবং ফাংশন / আচরণ সেটিং করার জন্য দায়ী।
  • কেবলমাত্র এই $scope বস্তুর (এবং প্রোটোটিক্যাল উত্তরাধিকার বাজানো হলে পিতা-মাতা সুযোগের বস্তুগুলি) কেবলমাত্র পদ্ধতিগুলি HTML / ভিউ থেকে অ্যাক্সেসযোগ্য। যেমন, ng-click , ফিল্টার ইত্যাদি থেকে

দীর্ঘ উত্তর :

একটি নিয়ামক ফাংশন একটি জাভাস্ক্রিপ্ট কন্সট্রাকটর ফাংশন। যখন কন্সট্রাকটর ফাংশন কার্যকর হয় (উদাহরণস্বরূপ, যখন একটি ভিউ লোড হয়), this (অর্থাৎ, "ফাংশন প্রসঙ্গ") নিয়ামক বস্তুতে সেট করা হয়। সুতরাং "ট্যাব" কন্ট্রোলার কন্সট্রাকটর ফাংশনে, যখন অ্যাডপেন ফাংশন তৈরি হয়

this.addPane = function(pane) { ... }

এটি $ scope নয়, নিয়ামক বস্তুর উপর তৈরি করা হয়। দর্শনগুলি addPane ফাংশন দেখতে পারে না - তাদের কেবলমাত্র $ scope এ সংজ্ঞায়িত ফাংশনে অ্যাক্সেস আছে। অন্য কথায়, এইচটিএমএল, এই কাজ করবে না:

<a ng-click="addPane(newPane)">won't work</a>

"ট্যাব" কন্ট্রোলার কন্সট্রকটার ফাংশন কার্যকর করার পরে, আমাদের নিম্নলিখিতগুলি রয়েছে:

ড্যাশেড কালো লাইন প্রোটোটাইল উত্তরাধিকার সূচিত করে - একটি বিচ্ছিন্ন সুযোগ যা প্রোটোটাইপিকভাবে স্কোপ থেকে উত্তরাধিকারী হয়। (এটি প্রোটোটিক্যালিকভাবে সেই সুযোগ থেকে উত্তরাধিকারী হয় না যেখানে নির্দেশটি HTML এ নির্দেশিত হয়েছিল।)

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

সুতরাং, এই প্রশ্নটি শুরু করে: যদি আমাদের কেবল ট্যাব নিয়ামক অ্যাক্সেস থাকে তবে আমরা কীভাবে ট্যাবগুলিতে অ্যাক্সেস পেতে পারি $ সুযোগ বিচ্ছিন্ন করে (যা আমরা সত্যিই চাই)?

আচ্ছা, লাল বিন্দুযুক্ত লাইনটি উত্তর। AddPane () ফাংশনটির "সুযোগ" (আমি জাভাস্ক্রিপ্টের ফাংশন স্কোপ / বন্ধের এখানে উল্লেখ করছি) ট্যাবগুলিতে ফাংশন অ্যাক্সেসটি $ সুযোগটি আলাদা করে দেয়। আচ্ছা, addPane () এটিকে অ্যাডপানে () সংজ্ঞায়িত করার সময় তৈরি হওয়া বন্ধের কারণে উপরের চিত্রের "ট্যাব ইওসলেটস্কোপ" অ্যাক্সেস আছে। (যদি আমরা ট্যাব $ স্কোপ বস্তুর উপর addPane () সংজ্ঞায়িত করে থাকি, তবে ফেন নির্দেশের এই ফাংশনে অ্যাক্সেস থাকবে না এবং তাই ট্যাব $ scope এর সাথে যোগাযোগ করার কোন উপায় নেই।)

আপনার প্রশ্নের অন্যান্য অংশটি উত্তর দিতে: how does $scope work in controllers? :

$ স্কোপে সংজ্ঞায়িত ফাংশনগুলির মধ্যে, this "কার্যক্ষেত্রের কোথায় কোথায় / কখন বলা হয়েছিল" $ স্কোপে সেট করা হয়েছে। ধরুন আমরা নিম্নলিখিত এইচটিএমএল আছে:

<div ng-controller="ParentCtrl">
   <a ng-click="logThisAndScope()">log "this" and $scope</a> - parent scope
   <div ng-controller="ChildCtrl">
      <a ng-click="logThisAndScope()">log "this" and $scope</a> - child scope
   </div>
</div>

এবং ParentCtrl ( ParentCtrl ) আছে

$scope.logThisAndScope = function() {
    console.log(this, $scope)
}

প্রথম লিংকে ক্লিক করলে দেখানো হবে যে this এবং $scope একই, কারণ " ফাংশনটি কল করার সময় কার্যকরী সুযোগটি" হল ParentCtrl সাথে যুক্ত সুযোগ।

দ্বিতীয় লিঙ্কটিতে ক্লিক করলে এটি প্রকাশ পাবে এবং $scope একই নয়, কারণ " কার্যকারিতাটি কার্যকর হওয়ার সুযোগটি" ChildCtrl সাথে যুক্ত সুযোগ। তাই এখানে, this ChildCtrl এর $scope সেট করা আছে। পদ্ধতির ভিতরে, $scope এখনও ParentCtrl এর $ scope।

Fiddle

আমি $ স্কোপে সংজ্ঞায়িত একটি ফাংশনের ভিতরে এটি ব্যবহার করার চেষ্টা করি না, কারণ এটি বিভ্রান্তিকর হয়ে যায় যা $ স্কোপ প্রভাবিত হচ্ছে, বিশেষ করে এনজি-পুনরাবৃত্তি, এনজি-অন্তর্ভুক্ত, এনজি-সুইচ এবং নির্দেশগুলি বিবেচনা করে সমস্ত তাদের নিজস্ব শিশু স্কোপগুলি তৈরি করতে পারে ।