javascript AngularJS में स्कोप प्रोटोटाइप/प्रोटोटाइपिकल विरासत की बारीकियों क्या हैं?




inheritance prototype (3)

मैं @Scott Driscoll उत्तर में जावास्क्रिप्ट के साथ प्रोटोटाइपिकल विरासत का एक उदाहरण जोड़ना चाहता हूं। हम Object.create () के साथ शास्त्रीय विरासत पैटर्न का उपयोग करेंगे जो एक्मास्क्रिप्ट 5 विनिर्देश का एक हिस्सा है।

सबसे पहले हम "अभिभावक" ऑब्जेक्ट फ़ंक्शन बनाते हैं

function Parent(){

}

फिर "पैरेंट" ऑब्जेक्ट फ़ंक्शन में प्रोटोटाइप जोड़ें

 Parent.prototype = {
 primitive : 1,
 object : {
    one : 1
   }
}

"चाइल्ड" ऑब्जेक्ट फ़ंक्शन बनाएं

function Child(){

}

बाल प्रोटोटाइप असाइन करें (बाल प्रोटोटाइप को पैरेंट प्रोटोटाइप से प्राप्त करें)

Child.prototype = Object.create(Parent.prototype);

उचित "चाइल्ड" प्रोटोटाइप कन्स्ट्रक्टर असाइन करें

Child.prototype.constructor = Child;

बाल प्रोटोटाइप में विधि "परिवर्तनप्रॉप" जोड़ें, जो बाल वस्तु में "आदिम" संपत्ति मान को फिर से लिख देगा और बाल और अभिभावक वस्तुओं में "object.one" मान को बदल देगा

Child.prototype.changeProps = function(){
    this.primitive = 2;
    this.object.one = 2;
};

अभिभावक (पिता) और बच्चे (बेटे) वस्तुओं को शुरू करें।

var dad = new Parent();
var son = new Child();

कॉल चाइल्ड (बेटा) परिवर्तनप्रॉप विधि

son.changeProps();

परिणाम जांचें।

अभिभावक आदिम संपत्ति नहीं बदली

console.log(dad.primitive); /* 1 */

बाल आदिम संपत्ति बदल दी (पुनः लिखा)

console.log(son.primitive); /* 2 */

अभिभावक और बाल वस्तु। एक गुण बदल गया

console.log(dad.object.one); /* 2 */
console.log(son.object.one); /* 2 */

यहां उदाहरण का काम http://jsbin.com/xexurukiso/1/edit/

Object.create पर अधिक जानकारी https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/create

एपीआई संदर्भ स्कोप पेज कहता है:

एक दायरा माता-पिता के दायरे से प्राप्त हो सकता है

डेवलपर गाइड स्कोप पेज कहता है:

एक दायरा (प्रोटोटाइपिक रूप से) अपने मूल दायरे से गुण प्राप्त करता है।

तो, क्या एक बच्चे का दायरा हमेशा अपने माता-पिता के दायरे से प्रोटोटाइपिक रूप से वारिस करता है? क्या अपवाद हैं? जब यह वारिस करता है, तो क्या यह हमेशा सामान्य जावास्क्रिप्ट प्रोटोटाइप विरासत है?


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

केवल संपत्ति ही प्रोटोटाइप श्रृंखला की खोज करती है, लिखती नहीं है। तो जब आप सेट करते हैं

myObject.prop = '123';

यह श्रृंखला को नहीं देखता है, लेकिन जब आप सेट करते हैं

myObject.myThing.prop = '123';

उस लेखन ऑपरेशन के भीतर एक सूक्ष्म पढ़ा जा रहा है जो अपने प्रोप को लिखने से पहले myThing को देखने की कोशिश करता है। इसलिए यही कारण है कि बच्चे से ऑब्जेक्ट.प्रोपर्टीज को लिखना माता-पिता की वस्तुओं पर मिलता है।


त्वरित उत्तर :
एक बच्चे का दायरा आम तौर पर अपने मूल दायरे से प्रोटोटाइपिक रूप से विरासत में मिलता है, लेकिन हमेशा नहीं। इस नियम का एक अपवाद scope: { ... } साथ एक निर्देश scope: { ... } - यह एक "अलग" क्षेत्र बनाता है जो प्रोटोटाइपिक रूप से वारिस नहीं करता है। यह निर्माण अक्सर "पुन: प्रयोज्य घटक" निर्देश बनाते समय उपयोग किया जाता है।

बारीकियों के लिए, दायरा विरासत सामान्य रूप से सीधे है ... जब तक आपको बच्चे के दायरे में 2-तरफा डेटा बाध्यकारी (यानी, फॉर्म तत्व, एनजी-मॉडल) की आवश्यकता नहीं होती है। यदि आप बच्चे के दायरे के अंदर से मूल दायरे में एक आदिम (उदाहरण के लिए, संख्या, स्ट्रिंग, बूलियन) से जुड़ने का प्रयास करते हैं तो एनजी-दोहराना, एनजी-स्विच, और एनजी-शामिल आपको यात्रा कर सकते हैं। यह काम नहीं करता है कि अधिकांश लोगों को उम्मीद है कि इसे काम करना चाहिए। बच्चे के दायरे को अपनी संपत्ति मिलती है जो समान नाम की मूल संपत्ति को छुपा / छाया देती है। आपके कामकाज हैं

  1. अपने मॉडल के लिए माता-पिता में वस्तुओं को परिभाषित करें, फिर बच्चे में उस वस्तु की एक संपत्ति का संदर्भ लें: parentObj.someProp
  2. $ parent.parentScopeProperty का उपयोग करें (हमेशा संभव नहीं है, लेकिन 1 से भी आसान जहां संभव हो)
  3. माता-पिता के दायरे पर एक फ़ंक्शन को परिभाषित करें, और इसे बच्चे से कॉल करें (हमेशा संभव नहीं)

न्यू एंगुलरजेएस डेवलपर्स को अक्सर एहसास नहीं होता है कि ng-repeat , ng-switch , ng-view , ng-include और ng-if सभी नए बच्चे के स्कोप बनाते हैं, तो समस्याएं अक्सर दिखाई देती हैं जब ये निर्देश शामिल होते हैं। (समस्या के त्वरित चित्रण के लिए यह उदाहरण देखें।)

प्राइमेटिव के साथ इस मुद्दे को हमेशा "सर्वोत्तम अभ्यास" के "सर्वोत्तम अभ्यास" का पालन करके आसानी से बचाया जा सकता है अपने एनजी-मॉडल में - 3 मिनट के लायक देखें। मिस्को ने ng-switch साथ आदिम बाध्यकारी समस्या का प्रदर्शन किया।

एक '।' होने आपके मॉडल में यह सुनिश्चित होगा कि प्रोटोटाइप विरासत खेल में है। तो, उपयोग करें

<input type="text" ng-model="someObj.prop1">

<!--rather than
<input type="text" ng-model="prop1">`
-->

लंबा जवाब :

जावास्क्रिप्ट प्रोटोटाइप विरासत

AngularJS विकी पर भी रखा गया: https://github.com/angular/angular.js/wiki/Understanding-Scopes स्कोप

पहले प्रोटोटाइप विरासत की ठोस समझ रखना महत्वपूर्ण है, खासकर यदि आप सर्वर-साइड पृष्ठभूमि से आ रहे हैं और आप कक्षा-संबंधी विरासत से अधिक परिचित हैं। तो आइए पहले इसकी समीक्षा करें।

मान लीजिए कि अभिभावकस्कोप में एस्ट्रिंग, एनम्बर, एनएरे, एओब्जेक्ट और एफ़ंक्शन हैं। यदि बच्चेस्कोप प्रोटोटाइपिक रूप से पेरेंटस्कोप से विरासत में मिलता है, तो हमारे पास है:

(ध्यान दें कि अंतरिक्ष को बचाने के लिए, मैं एक अलग नीली वस्तु के रूप में एक एकल नीली वस्तु के रूप में एक एकल नीली वस्तु के रूप में anArray ऑब्जेक्ट को तीन अलग ग्रे anArray दिखाता हूं।)

यदि हम बच्चे के दायरे से अभिभावकस्कोप पर परिभाषित संपत्ति तक पहुंचने का प्रयास करते हैं, तो जावास्क्रिप्ट पहले बच्चे के दायरे में दिखाई देगा, संपत्ति नहीं ढूंढ पाएगा, फिर विरासत में दिखाई देगा, और संपत्ति ढूंढें। (अगर इसे पेरेंटस्कोप में संपत्ति नहीं मिली, तो यह प्रोटोटाइप श्रृंखला जारी रखेगी ... रूट स्कोप तक सभी तरह से)। तो, ये सब सच हैं:

childScope.aString === 'parent string'
childScope.anArray[1] === 20
childScope.anObject.property1 === 'parent prop1'
childScope.aFunction() === 'parent output'

मान लीजिए कि हम ऐसा करते हैं:

childScope.aString = 'child string'

प्रोटोटाइप श्रृंखला से परामर्श नहीं किया जाता है, और एक नई एस्ट्रिंग संपत्ति बच्चेस्कोप में जोड़ दी जाती है। यह नई संपत्ति उसी नाम के साथ अभिभावकस्कोप संपत्ति को छुपा / छाया देती है। यह बहुत महत्वपूर्ण हो जाएगा जब हम नीचे ng-repeat और ng-include चर्चा करते हैं।

मान लीजिए कि हम ऐसा करते हैं:

childScope.anArray[1] = '22'
childScope.anObject.property1 = 'child prop1'

प्रोटोटाइप श्रृंखला से परामर्श किया जाता है क्योंकि ऑब्जेक्ट्स (anArray और anObject) बच्चेस्कोप में नहीं पाए जाते हैं। ऑब्जेक्ट्स पैरेंटस्कोप में पाए जाते हैं, और मूल मानों पर प्रॉपर्टी मान अपडेट होते हैं। बच्चे के स्थान पर कोई नई संपत्ति नहीं जोड़ा गया है; कोई नई वस्तुएं नहीं बनाई गई हैं। (ध्यान दें कि जावास्क्रिप्ट सरणी और कार्यों में भी ऑब्जेक्ट्स हैं।)

मान लीजिए कि हम ऐसा करते हैं:

childScope.anArray = [100, 555]
childScope.anObject = { name: 'Mark', country: 'USA' }

प्रोटोटाइप श्रृंखला से परामर्श नहीं किया जाता है, और बच्चे के दायरे में दो नए ऑब्जेक्ट गुण होते हैं जो समान नामों के साथ अभिभावक स्कोप ऑब्जेक्ट गुणों को छिपाते / छाया करते हैं।

टेकअवे:

  • अगर हम childScope.propertyX पढ़ते हैं, और बच्चेस्कोप में propertyX है, तो प्रोटोटाइप श्रृंखला से परामर्श नहीं किया जाता है।
  • अगर हम childScope.propertyX सेट करते हैं, तो प्रोटोटाइप श्रृंखला से परामर्श नहीं किया जाता है।

एक आखिरी परिदृश्य:

delete childScope.anArray
childScope.anArray[1] === 22  // true

हमने पहले बच्चे स्कोप संपत्ति को हटा दिया, फिर जब हम फिर से संपत्ति तक पहुंचने का प्रयास करते हैं, तो प्रोटोटाइप श्रृंखला से परामर्श लिया जाता है।

कोणीय दायरा विरासत

दावेदार:

  • निम्नलिखित नए स्कोप बनाते हैं, और प्रोटोटाइपिक रूप से प्राप्त होते हैं: एनजी-दोहराना, एनजी-शामिल, एनजी-स्विच, एनजी-कंट्रोलर, scope: true साथ निर्देश scope: true , transclude: true साथ transclude: true
  • निम्नलिखित एक नया दायरा बनाता है जो प्रोटोटाइपिक रूप से प्राप्त नहीं होता है: scope: { ... } साथ निर्देश scope: { ... } । यह इसके बजाय एक "अलग" गुंजाइश बनाता है।

नोट, डिफ़ॉल्ट रूप से, निर्देश नए दायरे नहीं बनाते हैं - यानी, डिफ़ॉल्ट scope: false

एनजी-शामिल

मान लीजिए कि हमारे पास हमारे नियंत्रक हैं:

$scope.myPrimitive = 50;
$scope.myObject    = {aNumber: 11};

और हमारे एचटीएमएल में:

<script type="text/ng-template" id="/tpl1.html">
<input ng-model="myPrimitive">
</script>
<div ng-include src="'/tpl1.html'"></div>

<script type="text/ng-template" id="/tpl2.html">
<input ng-model="myObject.aNumber">
</script>
<div ng-include src="'/tpl2.html'"></div>

प्रत्येक एनजी-इन में एक नया बच्चा गुंजाइश उत्पन्न होता है, जो प्रोटोटाइपिक रूप से मूल दायरे से प्राप्त होता है।

टाइपिंग (कहें, "77") पहले इनपुट टेक्स्टबॉक्स में बच्चे के दायरे को एक नया myPrimitive स्कोप प्रॉपर्टी प्राप्त करने का कारण बनता है जो समान नाम की मूल दायरे की संपत्ति को छुपा / छाया करता है। यह शायद वह नहीं है जो आप चाहते हैं / उम्मीद करते हैं।

टाइपिंग (कहें, "99") दूसरे इनपुट टेक्स्टबॉक्स में नतीजतन एक नई बच्ची संपत्ति नहीं होती है। चूंकि tpl2.html मॉडल को किसी ऑब्जेक्ट प्रॉपर्टी से जोड़ता है, इसलिए प्रोटोटाइप विरासत उस समय में जाती है जब ngModel ऑब्जेक्ट myObject के लिए दिखता है - यह इसे मूल दायरे में पाता है।

अगर हम अपने मॉडल को आदिम से किसी ऑब्जेक्ट में बदलना नहीं चाहते हैं, तो हम $ पैरेंट का उपयोग करने के लिए पहले टेम्पलेट को फिर से लिख सकते हैं:

<input ng-model="$parent.myPrimitive">

इस इनपुट टेक्स्टबॉक्स में टाइपिंग (कहें, "22") नतीजतन एक नई बच्ची संपत्ति नहीं है। मॉडल अब मूल दायरे की संपत्ति से जुड़ा हुआ है (क्योंकि $ माता-पिता एक बाल स्कोप संपत्ति है जो माता-पिता के दायरे का संदर्भ देता है)।

सभी क्षेत्रों (प्रोटोटाइप या नहीं) के लिए, कोणीय हमेशा माता-पिता-रिश्ते संबंध (यानी, पदानुक्रम) ट्रैक करता है, स्कोप गुणों के माध्यम से $ माता-पिता, $$ childHead और $$ childTail। मैं आमतौर पर आरेखों में इन स्कोप गुणों को नहीं दिखाता हूं।

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

// in the parent scope
$scope.setMyPrimitive = function(value) {
     $scope.myPrimitive = value;
}

यहां एक नमूना पहेली है जो इस "पैरेंट फ़ंक्शन" दृष्टिकोण का उपयोग करती है। (पहेली को इस उत्तर के हिस्से के रूप में लिखा गया था: https://.com/a/14104318/215945 ।)

https://.com/a/13782671/215945 और https://github.com/angular/angular.js/issues/1267 भी देखें।

एनजी स्विच

एनजी-स्विच स्कोप विरासत एनजी-शामिल की तरह काम करता है। इसलिए यदि आपको माता-पिता के दायरे में एक आदिम के लिए 2-तरफा डेटा बाध्यकारी की आवश्यकता है, तो $ माता-पिता का उपयोग करें, या मॉडल को ऑब्जेक्ट में बदलने के लिए बदलें और उसके बाद उस ऑब्जेक्ट की एक संपत्ति से जुड़ें। यह माता-पिता के दायरे के गुणों के छिपाने / छायांकन से बचने वाले बच्चे के दायरे से बच जाएगा।

एंगुलरजेएस को भी देखें , स्विच-केस के दायरे को बांधें?

एनजी-दोहराने

Ng-repeat थोड़ा अलग काम करता है। मान लीजिए कि हमारे पास हमारे नियंत्रक हैं:

$scope.myArrayOfPrimitives = [ 11, 22 ];
$scope.myArrayOfObjects    = [{num: 101}, {num: 202}]

और हमारे एचटीएमएल में:

<ul><li ng-repeat="num in myArrayOfPrimitives">
       <input ng-model="num">
    </li>
<ul>
<ul><li ng-repeat="obj in myArrayOfObjects">
       <input ng-model="obj.num">
    </li>
<ul>

प्रत्येक आइटम / पुनरावृत्ति के लिए, ng-repeat एक नया दायरा बनाता है, जो प्रोटोटाइपिक रूप से मूल दायरे से प्राप्त होता है, लेकिन यह आइटम के मूल्य को नए बच्चे के दायरे पर एक नई संपत्ति को भी निर्दिष्ट करता है । (नई संपत्ति का नाम लूप वैरिएबल का नाम है।) यह है कि वास्तव में एनजी-दोहराने के लिए कोणीय स्रोत कोड क्या है:

childScope = scope.$new();  // child scope prototypically inherits from parent scope
...
childScope[valueIdent] = value;  // creates a new childScope property

यदि आइटम एक आदिम है (जैसा कि myArrayOfPrimitives में), अनिवार्य रूप से मूल्य की एक प्रति नई बाल स्कोप संपत्ति को सौंपी जाती है। बच्चे के दायरे की संपत्ति के मूल्य को बदलना (यानी, एनजी-मॉडल का उपयोग करना, इसलिए बाल स्कोप num ) पैरेंट स्कोप संदर्भों को सरणी नहीं बदलता है। तो उपरोक्त पहले एनजी-दोहराने में, प्रत्येक बच्चे के दायरे को एक num संपत्ति मिलती है जो myArrayOfPrimitives सरणी से स्वतंत्र है:

यह एनजी-दोहराना काम नहीं करेगा (जैसे आप चाहते हैं / इसकी अपेक्षा करते हैं)। टेक्स्टबॉक्स में टाइप करने से ग्रे बॉक्स में मान बदलते हैं, जो केवल बाल स्कॉप्स में दिखाई देते हैं। हम जो चाहते हैं वह इनपुट के लिए myArrayOfPrimitives सरणी को प्रभावित करने के लिए है, न कि बच्चे के दायरे आदिम संपत्ति। इसे पूरा करने के लिए, हमें मॉडल को ऑब्जेक्ट्स की सरणी बनाने के लिए बदलने की जरूरत है।

इसलिए, यदि आइटम एक वस्तु है, तो मूल वस्तु (प्रतिलिपि नहीं) का संदर्भ नए बच्चे के दायरे की संपत्ति को सौंपा गया है। बच्चे के दायरे की संपत्ति के मूल्य को बदलना (यानी, एनजी-मॉडल का उपयोग करना, इसलिए obj.num ) ऑब्जेक्ट को पैरेंट स्कोप संदर्भ बदलता है। तो ऊपर दूसरे एनजी-दोहराना में, हमारे पास है:

(मैंने सिर्फ एक पंक्ति ग्रे रंगीन किया ताकि यह स्पष्ट हो कि यह कहां जा रहा है।)

यह उम्मीद के रूप में काम करता है। टेक्स्टबॉक्स में टाइप करने से ग्रे बॉक्स में मान बदलते हैं, जो कि बच्चे और अभिभावक दोनों स्कॉप्स के लिए दृश्यमान होते हैं।

एनजी-मॉडल, एनजी-दोहराना, और इनपुट और https://.com/a/13782671/215945 साथ भी कठिनाई देखें

एनजी नियंत्रक

सामान्य प्रोटोटाइप विरासत में एनजी-नियंत्रक परिणामों का उपयोग करते हुए नेस्टिंग नियंत्रक, जैसे एनजी-शामिल और एनजी-स्विच, इसलिए वही तकनीक लागू होती है। हालांकि, "यह दो नियंत्रकों के लिए $ स्कोप विरासत के माध्यम से जानकारी साझा करने के लिए खराब रूप माना जाता है" - http://onehungrymind.com/angularjs-sticky-notes-pt-1-architecture/ एक सेवा का उपयोग डेटा के बीच डेटा साझा करने के लिए किया जाना चाहिए इसके बजाय नियंत्रक।

(यदि आप वास्तव में नियंत्रक स्कोप विरासत के माध्यम से डेटा साझा करना चाहते हैं, तो आपको कुछ भी करने की ज़रूरत नहीं है। बच्चे के दायरे के पास सभी मूल दायरे गुणों तक पहुंच होगी। लोडर या नेविगेट करते समय भी नियंत्रक लोड ऑर्डर अलग होता है )

निर्देशों

  1. डिफ़ॉल्ट ( scope: false ) - निर्देश एक नया दायरा नहीं बनाता है, इसलिए यहां कोई विरासत नहीं है। यह आसान है, लेकिन यह भी खतरनाक है, उदाहरण के लिए, एक निर्देश यह सोच सकता है कि यह दायरे पर एक नई संपत्ति बना रहा है, वास्तव में यह एक मौजूदा संपत्ति को पकड़ रहा है। यह उन निर्देशों को लिखने के लिए एक अच्छा विकल्प नहीं है जो पुन: प्रयोज्य घटकों के रूप में लक्षित हैं।
  2. scope: true - निर्देश एक नया बच्चा गुंजाइश बनाता है जो प्रोटोटाइपिक रूप से मूल दायरे से प्राप्त होता है। यदि एक से अधिक निर्देश (उसी डीओएम तत्व पर) एक नए दायरे का अनुरोध करता है, तो केवल एक नया बच्चा स्कोप बनाया जाता है। चूंकि हमारे पास "सामान्य" प्रोटोटाइप विरासत है, यह एनजी-शामिल और एनजी-स्विच की तरह है, इसलिए माता-पिता के दायरे प्राइमेटिव्स के लिए बाध्यकारी 2-तरफा डेटा से सावधान रहें, और बाल दायरे के गुणों के बच्चे के दायरे को छिपाने / छायांकन से सावधान रहें।
  3. scope: { ... } - निर्देश एक नया अलग / पृथक गुंजाइश बनाता है। यह प्रोटोटाइपिक रूप से वारिस नहीं करता है। पुन: प्रयोज्य घटकों को बनाते समय यह आमतौर पर आपकी सबसे अच्छी पसंद होती है, क्योंकि निर्देश माता-पिता के दायरे को गलती से पढ़ या संशोधित नहीं कर सकता है। हालांकि, इस तरह के निर्देशों को अक्सर कुछ माता-पिता के दायरे के गुणों तक पहुंच की आवश्यकता होती है। ऑब्जेक्ट हैश का उपयोग दो-तरफा बाध्यकारी ('=' का उपयोग करके) या एक तरफा बाध्यकारी ('@' का उपयोग करके) अभिभावक दायरे और अलग-अलग दायरे के बीच करने के लिए किया जाता है। अभिभावक स्कोप अभिव्यक्तियों से जुड़ने के लिए '&' भी है। इसलिए, ये सभी स्थानीय दायरे गुण बनाते हैं जो मूल दायरे से प्राप्त होते हैं। ध्यान दें कि बाध्यकारी सेट अप करने में सहायता के लिए विशेषताओं का उपयोग किया जाता है - आप ऑब्जेक्ट हैश में केवल पैरेंट स्कोप प्रॉपर्टी नामों का संदर्भ नहीं दे सकते हैं, आपको एक विशेषता का उपयोग करना होगा। उदाहरण के लिए, यदि आप अलग-अलग दायरे में मूल संपत्ति पेरेंट से parentProp चाहते हैं तो यह काम नहीं करेगा: <div my-directive> और scope: { localProp: '@parentProp' } । प्रत्येक विशेषता संपत्ति को निर्दिष्ट करने के लिए एक विशेषता का उपयोग किया जाना चाहिए, जिस पर निर्देश बाध्य करना चाहता है: <div my-directive the-Parent-Prop=parentProp> और scope: { localProp: '@theParentProp' }
    गुंजाइश __proto__ संदर्भ ऑब्जेक्ट अलग करें। दायरे के $ माता-पिता को अभिभावक के दायरे को अलग करें, इसलिए यह अलग है और माता-पिता के दायरे से प्रोटोटाइपिक रूप से प्राप्त नहीं होता है, यह अभी भी एक बाल दायरा है।
    नीचे दी गई तस्वीर के लिए हमारे पास है
    <my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2"> और
    scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
    साथ ही, मान लें कि यह निर्देश इसके लिंकिंग फ़ंक्शन में करता है: scope.someIsolateProp = "I'm isolated"

    अलग-अलग क्षेत्रों पर अधिक जानकारी के लिए http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/
  4. transclude: true - निर्देश एक नया "स्थानांतरित" बाल क्षेत्र बनाता है, जो प्रोटोटाइपिक रूप से मूल दायरे से प्राप्त होता है। बहिष्कृत और पृथक गुंजाइश (यदि कोई है) भाई बहन हैं - प्रत्येक गुंजाइश की $ मूल संपत्ति समान माता-पिता का संदर्भ देती है। जब एक स्थानांतरित और एक अलग क्षेत्र दोनों मौजूद होते हैं, तो स्कोप प्रॉपर्टी $$ को अलग करें सिब्लिंग स्थानांतरित गुंजाइश का संदर्भ देगा। मुझे स्थानांतरित गुंजाइश के साथ किसी भी तरह की बारीकियों के बारे में पता नहीं है।
    नीचे दी गई तस्वीर के लिए, उपर्युक्त के रूप में उपरोक्त के समान निर्देश transclude: true

इस showScope() में एक showScope() फ़ंक्शन है जिसका उपयोग एक अलग और स्थानांतरित स्कोप की जांच के लिए किया जा सकता है। पहेली में टिप्पणियों में निर्देश देखें।

सारांश

चार प्रकार के स्कोप हैं:

  1. सामान्य प्रोटोटाइप स्कोप विरासत - एनजी-शामिल, एनजी-स्विच, एनजी-नियंत्रक, scope: true साथ निर्देश scope: true
  2. प्रतिलिपि / असाइनमेंट के साथ सामान्य प्रोटोटाइप स्कोप विरासत - एनजी-दोहराना। एनजी-दोहराने का प्रत्येक पुनरावृत्ति एक नया बच्चा गुंजाइश बनाता है, और उस नए बच्चे के दायरे को हमेशा एक नई संपत्ति मिलती है।
  3. गुंजाइश के साथ निर्देश - दायरे के साथ निर्देश scope: {...} । यह प्रोटोटाइप नहीं है, लेकिन '=', '@', और '&' गुणों के माध्यम से अभिभावक स्कोप गुणों तक पहुंचने के लिए एक तंत्र प्रदान करता है।
  4. स्थानांतरित गुंजाइश - transclude: true साथ transclude: true । यह भी एक सामान्य प्रोटोटाइप स्कोप विरासत है, लेकिन यह किसी भी अलग दायरे का एक भाई है।

सभी क्षेत्रों (प्रोटोटाइप या नहीं) के लिए, कोणीय हमेशा माता-पिता-बच्चे संबंध (यानी, पदानुक्रम) ट्रैक करता है, गुण $ माता-पिता और $$ बच्चे के माध्यम से $ और $ बच्चे बच्चे।

graphviz "* .dot" फ़ाइलों के साथ चित्र उत्पन्न किए गए थे, जो कि github पर हैं। टिम कैसवेल की " ऑब्जेक्ट ग्राफ के साथ सीखना जावास्क्रिप्ट " चित्रों के लिए ग्राफ़विज़ का उपयोग करने की प्रेरणा थी।





prototypal-inheritance