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




angularjs-scope this (5)

AngularJS এর ​​হোমপেজে "সামগ্রী তৈরি করুন" বিভাগে , এই উদাহরণটি রয়েছে: 

controller: function($scope, $element) {
  var panes = $scope.panes = [];
  $scope.select = function(pane) {
    angular.forEach(panes, function(pane) {
      pane.selected = false;
    });
    pane.selected = true;
  }
  this.addPane = function(pane) {
    if (panes.length == 0) $scope.select(pane);
    panes.push(pane);
  }
}

লক্ষ্য করুন কিভাবে পদ্ধতিটি $scope যুক্ত করা হয়, তবে addPane পদ্ধতিটি এতে যোগ করা হয়। যদি আমি $scope.addPane পরিবর্তন করি, কোড বিরতি।

ডকুমেন্টেশন আসলে একটি পার্থক্য যে বলে, কিন্তু এটা পার্থক্য কি উল্লেখ করে না:

কৌণিক (পূর্ব 1.0 আরসি) এর পূর্ববর্তী সংস্করণগুলি আপনাকে $scope পদ্ধতির সাথে একে অপরের সাথে ব্যবহার করার অনুমতি দেয়, তবে এটি আর নেই। সুযোগের উপর সংজ্ঞায়িত পদ্ধতির ভিতরে এবং $scope বিনিময়যোগ্য (কৌণিক এটি $scope স্কপে সেট করে), তবে অন্যথায় আপনার নিয়ামক কন্সট্রকটরের ভিতরে নয়।

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

"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

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

কৌণিক (পূর্ব 1.0 আরসি) এর পূর্ববর্তী সংস্করণগুলি আপনাকে $ স্কোপ পদ্ধতির সাথে একে অপরের সাথে ব্যবহার করার অনুমতি দেয়, তবে এটি আর নেই। সুযোগের উপর সংজ্ঞায়িত পদ্ধতির ভিতরে এবং $ সুযোগটি বিনিময়যোগ্য (কৌণিক এটি $ স্কপে সেট করে), তবে অন্যথায় আপনার নিয়ামক কন্সট্রকটরের ভিতরে নয়।

এই আচরণটি ফিরিয়ে আনতে (কেউ কি জানেন যে কেন এটি পরিবর্তিত হয়েছিল?) আপনি যোগ করতে পারেন: 

return angular.extend($scope, this);

আপনার নিয়ামক ফাংশনের শেষে (যে $ স্কোপ এই নিয়ামক ফাংশন ইনজেকশনের ছিল)।

নিয়ন্ত্রক বস্তুর মাধ্যমে পিতামাতার সুযোগের অ্যাক্সেস থাকার একটি চমৎকার প্রভাব রয়েছে যা আপনি require: '^myParentDirective' শিশু পেতে পারেন require: '^myParentDirective'

আমি আপনাকে নিম্নলিখিত পোস্টটি পড়ার সুপারিশ করছি: AngularJS: "হিসাবে কন্ট্রোলার" বা "$ সুযোগ"?

"$ Scope" এর উপর ভেরিয়েবল প্রকাশ করতে এটি "কন্ট্রোলার এফ" ব্যবহার করার সুবিধাগুলিকে খুব ভালভাবে বর্ণনা করে।

আমি জানি আপনি বিশেষ পদ্ধতি সম্পর্কে জিজ্ঞাসা করেছেন এবং ভেরিয়েবলগুলির জন্য নয়, তবে আমি মনে করি এটি একটি কৌশলকে আটকাতে এবং এর সাথে সামঞ্জস্যপূর্ণ।

তাই আমার মতে, পোস্টে আলোচনা করা পরিবর্তনশীল বিষয়গুলির কারণে, এটি কেবল "কন্ট্রোলার হিসাবে" কৌশলটি ব্যবহার করা এবং পদ্ধতিতে প্রয়োগ করা ভাল।

আমি শুধু দুটি মডেলের মধ্যে পার্থক্য সম্পর্কে একটি চমত্কার আকর্ষণীয় ব্যাখ্যা পড়ি এবং নিয়ামককে মডেল সংযুক্ত করার ক্রমবর্ধমান অগ্রাধিকার এবং দৃশ্যের সাথে মডেলগুলি বাঁধার জন্য নিয়ামককে উদ্বুদ্ধ করে। http://toddmotto.com/digging-into-angulars-controller-as-syntax/ নিবন্ধটি। তিনি এটি উল্লেখ করেন না তবে নির্দেশগুলি সংজ্ঞায়িত করার সময়, যদি আপনাকে একাধিক নির্দেশনাগুলির মধ্যে কিছু ভাগ করতে হয় এবং কোনও পরিষেবা না চান (সেখানে বৈধ ক্ষেত্রে পরিষেবাগুলি একটি ঝামেলা হয়) তাহলে পিতামাতার নির্দেশকের নিয়ন্ত্রণকারীকে তথ্য সংযুক্ত করুন। $ স্কোপ পরিষেবাটি প্রচুর দরকারী সামগ্রী সরবরাহ করে, $ ঘড়িটি সর্বাধিক সুস্পষ্ট বলে মনে হয় তবে যদি আপনি সারণীতে সাধারণ কন্ট্রোলার এবং 'কন্ট্রোলার এড' ব্যবহার করে ডেটাটি বদ্ধ করতে চান তবে সব ঠিক আছে এবং যুক্তিযুক্তভাবে অগ্রাধিকারযোগ্য।

<pane> Pane <pane> নির্দেশের কারণে এটি 'addPane' এর জন্য বরাদ্দ করা হয়েছে।

pane নির্দেশিকাটির require: '^tabs' , যা ট্যাব কন্ট্রোলার অবজেক্টটি পিতামাতার নির্দেশিকা থেকে লিঙ্ক ফাংশনে রাখে।

addPane এটিকে বরাদ্দ করা হয়েছে যাতে pane লিঙ্ক ফাংশন এটি দেখতে পারে। তারপরে pane লিংক ফাংশনে, addPane tabs কন্ট্রোলারের কেবলমাত্র একটি সম্পত্তি এবং এটি tabs কন্ট্রোলারঅবেক্ট.ড্যাডপেন। তাই প্যানে নির্দেশিকা এর লিঙ্কিং ফাংশন ট্যাব নিয়ামক বস্তুর অ্যাক্সেস করতে পারে এবং সেই কারণে অ্যাডপেন পদ্ধতিটি অ্যাক্সেস করতে পারে।

আমি আশা করি আমার ব্যাখ্যা যথেষ্ট স্পষ্ট। এটা ব্যাখ্যা করা কঠিন।




angularjs   angularjs-scope   this  


this