क्या मुझे `this` या` $ स्कोप` का उपयोग करना चाहिए?

251

नियंत्रक कार्यों तक पहुँचने के लिए उपयोग में दो पैटर्न हैं: thisऔर$scope ।

मुझे किसका उपयोग करना चाहिए और कब करना चाहिए? मैं समझता हूं thisकि नियंत्रक के लिए सेट है और $scopeदृश्य के लिए गुंजाइश श्रृंखला में एक वस्तु है। लेकिन नए "नियंत्रक के रूप में वार" सिंटैक्स के साथ, आप आसानी से या तो उपयोग कर सकते हैं। तो मैं जो पूछ रहा हूं वह सबसे अच्छा है और भविष्य के लिए क्या दिशा है?

उदाहरण:

का उपयोग करते हुए this

function UserCtrl() {
  this.bye = function() { alert('....'); };
}

<body ng-controller='UserCtrl as uCtrl'>
  <button ng-click='uCtrl.bye()'>bye</button>

का उपयोग करते हुए $scope

function UserCtrl($scope) {
    $scope.bye = function () { alert('....'); };
}

<body ng-controller='UserCtrl'>
    <button ng-click='bye()'>bye</button>

मैं व्यक्तिगत रूप से ढूंढता हूं this.name से अन्य जावास्क्रिप्ट ओओ पैटर्न की तुलना में आंख पर आसान और अधिक प्राकृतिक होना ।

कृपया सलाह दें?

angularjs

— SenseDeep
स्रोत

का उपयोग करते हुए 'इस' 2013 Google आई / ओ के रूप में नए हो रहा है m.youtube.com/watch?v=HCR7i5F5L8c : इसके अलावा, इस जवाब की जांच stackoverflow.com/questions/11605917/...

— AlanW

"UserCtrl uCtrl" सिंटैक्स नया है? मैं इसे 1.0.6 या 1.1.4 ngController पृष्ठों पर प्रलेखित नहीं देखता।

— मार्क राजकोक

ठीक है, यह नए 1.1.5 ngController पेज पर प्रलेखित है ।

— मार्क राजकॉक

1

$ गुंजाइश के लिए सर्वश्रेष्ठ व्याख्याएं और इस कोडेटुनेल.io

— साईं

229

दोनों के अपने उपयोग हैं। पहला, कुछ इतिहास ...

$ गुंजाइश "क्लासिक" तकनीक है, जबकि "नियंत्रक के रूप में" बहुत अधिक हालिया है (संस्करण 1.2.0 के रूप में आधिकारिक तौर पर हालांकि यह इससे पहले अस्थिर प्री-रिलीज़ में दिखाई दिया था)।

दोनों पूरी तरह से अच्छी तरह से काम करते हैं और एकमात्र गलत उत्तर उन्हें बिना किसी स्पष्ट कारण के एक ही ऐप में मिलाना है। सच कहूँ तो, उन्हें मिश्रण काम करेगा, लेकिन यह सिर्फ भ्रम में जोड़ देगा। इसलिए एक को चुनें और उसके साथ रोल करें। सबसे महत्वपूर्ण बात सुसंगत होना है।

कौनसा? वह आप पर निर्भर करता है। $ गुंजाइश के कई और उदाहरण हैं, लेकिन "नियंत्रक" भाप को भी उठा रहा है। क्या यह दूसरे से बढ़िया है? कि यह बहस का मुद्दा है। तो आप कैसे चुनते हैं?

आराम

मैं "नियंत्रक के रूप में" पसंद करता हूं क्योंकि मुझे $ गुंजाइश छिपाना और नियंत्रक से सदस्यों को एक मध्यस्थ वस्तु के माध्यम से दृश्य में उजागर करना पसंद है। इसे सेट करके। *, मैं केवल वही देख सकता हूं जो मैं नियंत्रक से दृश्य में प्रकट करना चाहता हूं। आप $ गुंजाइश के साथ भी ऐसा कर सकते हैं, मैं सिर्फ इसके लिए मानक जावास्क्रिप्ट का उपयोग करना पसंद करता हूं। वास्तव में, मैं इसे इस तरह से कोड करता हूं:

var vm = this;

vm.title = 'some title';
vm.saveData = function(){ ... } ;

return vm;

यह मेरे लिए साफ-सुथरा महसूस करता है और यह देखने में आसान बनाता है कि दृश्य में क्या उजागर हो रहा है। ध्यान दें कि मैं उस चर का नाम देता हूं जिसे मैं "vm" लौटाता हूं, जो देखने के लिए खड़ा है। वह सिर्फ मेरा अधिवेशन है।

$ गुंजाइश के साथ मैं वही चीजें कर सकता हूं, इसलिए मैं तकनीक के साथ नहीं जोड़ रहा हूं या नहीं कर रहा हूं।

$scope.title = 'some title';
$scope.saveData = function() { ... };

तो यह आप पर निर्भर है।

इंजेक्शन

$ स्कोप के साथ मुझे कंट्रोलर में $ स्कोप इंजेक्ट करने की आवश्यकता है। मुझे नियंत्रक के साथ ऐसा करने की आवश्यकता नहीं है, जब तक कि मुझे किसी अन्य कारण (जैसे $ प्रसारण या घड़ियों की आवश्यकता न हो, हालांकि मैं नियंत्रक में घड़ियों से बचने की कोशिश करता हूं)।

अद्यतन मैंने इस पोस्ट को 2 विकल्पों के बारे में लिखा है: http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

— जॉन पापा
स्रोत

4

व्यक्तिगत रूप से मैं भी vm का उपयोग करके आपके दृष्टिकोण का अनुसरण करता हूं। आपके द्वारा उठाया गया एकमात्र कोड गंध है, जब आपको विशेष रूप से $ स्कोप के साथ सहभागिता करने की आवश्यकता होती है, जैसे कि ईवेंट की सदस्यता लेना या प्रसारण करना, अपने नियंत्रक के अंदर फ़ॉर्म सत्यापन चर तक पहुंचना आदि। यह कुछ हद तक मिश्रित वातावरण की ओर ले जाता है जहां आपको अभी भी $ स्कोप को इंजेक्ट करने की आवश्यकता है। भले ही आप नियंत्रक को सुविधा के रूप में उपयोग करते हैं।

— 14:17 पर

9

सही। उस मामले में अभी भी $ गुंजाइश का उपयोग किया जाता है, लेकिन इसका उपयोग सेवा के रूप में अधिक किया जाता है। जब हम कोणीय सेवाओं ($ गुंजाइश, $ q, आदि) को इंजेक्ट करते हैं तो वे कुछ ऐसी सुविधा प्रदान करते हैं जिनकी हमें आवश्यकता होती है। $ गुंजाइश हमें संदेशों को देखने, लागू करने, साथ ही डेटा बाइंडिंग का उपयोग करने की अनुमति देती है। नियंत्रक के रूप में उपयोग करने के दौरान भी, $ गुंजाइश अभी भी उपयोग की जाती है, इसका सिर्फ सार

— जॉन पापा

1

var vm = this;क्या आपको इसे दृश्य में 'vm' कहने की आवश्यकता है? 'vm के रूप में नियंत्रक'। क्या उन्हें एक ही होना है?

— जावीद १३'१४ को

2

@ जॉनपाप - साइडवफ़ल टेम्प्लेट "वापसी vm क्यों नहीं?" नियंत्रक के रूप में उपयोग करते समय?

— केविन

2

@ केविन कंट्रोलर्स प्रभावी रूप से एक Ctor के रूप में कार्य करते हैं और इस प्रकार "यह" पहले ही वापस कर देते हैं।

— जॉन पापा

68

$scopeकोणीय 2.0 में हटाया जा रहा है। इस प्रकार, का उपयोग thisकरना एक दृष्टिकोण होगा जो अन्य लोग अनुसरण करना चाहते हैं क्योंकि कोणीय 2.0 के रिलीज की तारीख करीब आती है।

— jason328
स्रोत

40

मेरी राय है कि जावास्क्रिप्ट में 'यह' अपने आप में पर्याप्त मुद्दे हैं, और इसके लिए एक और अर्थ / उपयोग जोड़ना एक अच्छा विचार नहीं है।

मैं स्पष्टता के लिए $ गुंजाइश का उपयोग करेंगे।

अपडेट करें

यहाँ अब 'नियंत्रक के रूप में' वाक्य-विन्यास है । मैं एक प्रशंसक नहीं हूं, लेकिन अब जब यह एक अधिक 'आधिकारिक' एंगुलरजेएस है तो इसका निर्माण कुछ ध्यान देने योग्य है।

— रॉय ट्रूवेल
स्रोत

10

मुझे लगता है कि हमें सबसे पहले नए "UserCtrl as uCtrl" सिंटैक्स को समझने की आवश्यकता है, इससे पहले कि हम कह सकें कि हमें लगता है कि बेहतर है।

— मार्क राजकॉक

Re 'UserCtrl as uCtrl', मैं मानता हूं, इसे समझने की जरूरत है। मुझे लगता है कि यह एक बुरा विचार है, अधिकांश कारणों से यहां दिए गए तर्क: group.google.com/forum//topic/angular/84selECbp1I

— Roy Truelove

4

यदि आप जेएस में ऊप से परिचित हैं तो यह सही समझ में आता है। एक नियंत्रक एक वर्ग है, और कोणीय हर बार एक नियंत्रक बनाने के लिए नए ऑपरेटर का उपयोग करता है। आप इसे नापसंद करने के लिए स्वागत कर रहे हैं, लेकिन बताते हैं कि 'यह' भ्रामक है। यह 'इस' के लिए स्वीकार्य उपयोग का मामला है।

— एमजे

$ गुंजाइश स्पष्टता के लिए कुछ भी नहीं जोड़ता है। वास्तव में यह जानना बहुत मुश्किल हो सकता है कि $ गुंजाइश का उपयोग करते समय दृश्य में क्या हो रहा है और आपके पास नेस्टेड स्कोप हैं। इस का उपयोग करने के साथ वाक्यविन्यास के रूप में नियंत्रक बहुत अधिक स्पष्टता जोड़ता है। देखने में यह अच्छा और स्पष्ट है कि नियंत्रक का दायरा किस विधि या संपत्ति से उत्पन्न होता है।

— ddelrio1986

1

मैं @ ddelrio1986 से सहमत हूं। बस varm = $ गुंजाइश का उपयोग करने के साथ बूटस्ट्रैप टैब और एगुलर के साथ एक समस्या थी। टैब्स का अपना दायरा होता है और इसलिए आप इसका उपयोग नहीं कर सकते हैं जैसा कि आप अपेक्षा करते हैं लेकिन var vm = इस के साथ, चीजें बस अपेक्षा के अनुरूप काम करती हैं।

— user441521

11

मुझे लगता है कि नियंत्रक के रूप में बेहतर है क्योंकि यह अधिक आसानी से घोंसले के शिकार के लिए अनुमति देता है जैसा कि टोड आदर्श वाक्य द्वारा यहां वर्णित है:

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

इसके अलावा, यह बीमा करेगा कि आपके पास हमेशा कम से कम एक है। अपनी बाध्यकारी अभिव्यक्ति में जो आपको पालन करने के लिए बाध्य नहीं करता है आदिमियों से पुनर्संयोजन के ।

साथ ही आप उस दायरे से अलग हो सकते हैं जो 2.0 में खत्म हो रहा है।

— रयान वाइस
स्रोत

7

कोणीय प्रलेखन स्पष्ट रूप से आपको बताता है कि उपयोग करने thisकी सिफारिश की गई है। यह, इस तथ्य के अलावा कि $scopeहटाया जा रहा है मेरे लिए कभी उपयोग नहीं करने के लिए पर्याप्त कारण है $scope।

— tjespe
स्रोत

4

jason328 की "$ गुंजाइश को एंगुलर 2.0 में हटाया जा रहा है" मुझे एक अच्छा कारण लगता है। और मुझे पसंद करने में मदद करने के लिए एक और कारण मिला: thisअधिक पठनीय है - जब मैं fooCtrl.barएचटीएमएल में देखता हूं, तो मुझे तुरंत पता चलता है कि कहां की परिभाषा ढूंढनी है bar।

अपडेट: thisसमाधान पर स्विच करने के बाद लंबे समय तक नहीं , मैं $scopeउस तरह से चूकना शुरू कर दिया, जिसे कम टाइपिंग की आवश्यकता है

— ZZY
स्रोत

2

मुझे संयोजन पसंद है।

$ स्कोप का एक सरल कंसोल.लॉग और कुछ मॉक डेटा के साथ उन्हें पॉप करने के बाद 'यह' आपको वह दिखाएगा।

$ गुंजाइश एक नियंत्रक के कवर भागों के तहत उपयोग की अनुमति देता है, उदाहरण के लिए:

$$ChildScope: null;
$$childHead: null;
$$childTail: null;
$$listenerCount: Object;
$$listeners: Object;
$$nextSibling: Scope;
$$prevSibling: null;
$$watchers: null;
$$watcherCount: 0;
$id: 2;
$parent: Object;
foo: 'bar';

** $$ के साथ गुणों और विधियों को कोणीय टीम द्वारा गड़बड़ करने की अनुशंसा नहीं की जाती है, लेकिन $ $ माता-पिता और $ आईडी के साथ शांत सामान करने के लिए $ सुरक्षित खेल हो सकता है।

2-वे-बाउंड डेटा और फ़ंक्शंस संलग्न करते हुए 'यह' सीधे बिंदु पर पहुंच जाता है। आप केवल वही देखेंगे जो आपने संलग्न किया था:

foo: 'bar';

तो मैं संयोजन क्यों पसंद करूं?

यूआई-राउटर नेस्टेड ऐप्स में, मैं मुख्य नियंत्रक तक पहुँच सकता हूं, एक बच्चे के नियंत्रक के अंदर सार्वभौमिक मूल्यों और कार्यों को सेट और कॉल कर सकता हूं:

मुख्य नियंत्रक में:

// Main Controller
var mainCtrl = this;
mainCtrl.foo = 'Parent at the bar';

बाल नियंत्रक में:

// Child Controller
var mainCtrl = $scope.$parent.mainCtrl;
var childCtrl = this;

// update the parent from within the child
childCtrl.underageDrinking = function(){
    mainCtrl.foo = 'Child at the bar';
}

// And then attach the child back to a property on the parent controller!
mainCtrl.currentCtrl = childCtrl;

अब, आप माता-पिता से बच्चे और बच्चे के भीतर से माता-पिता तक पहुंच सकते हैं!

— क्रेग ओ कर्टिस
स्रोत

1

दोनों काम करते हैं, लेकिन यदि आप उन चीजों को लागू करते हैं जो गुंजाइश से $ गुंजाइश के लिए उपयुक्त हैं, और यदि आप उन चीजों को लागू करते हैं जो नियंत्रक के लिए उपयुक्त हैं, तो आपके कोड को बनाए रखना आसान होगा। जो लोग कहते हैं कि "यूजी बस स्कोप का उपयोग करते हैं, इस नियंत्रक को सिंटैक्स के रूप में भूल जाते हैं" ... यह एक ही काम कर सकता है लेकिन मुझे आश्चर्य है कि आप चीजों का ट्रैक खोए बिना एक विशाल एप्लिकेशन को कैसे बनाए रख पाएंगे।

— निक मैनिंग
स्रोत