एंजुलरजेएस स्कोप

स्कोप (scope) यह है जो HTML (दृश्य) और JavaScript (कंट्रोलर) के बीच का बांधन है。

स्कोप एक वस्तु है जिसमें उपलब्ध विशेषताएँ और विधियाँ हैं。

स्कोप दृश्य और कंट्रोलर दोनों के लिए उपलब्ध है。

स्कोप का उपयोग कैसे करें?

जब आप AngularJS में कंट्रोलर बनाते हैं, तो आप $scope वस्तु के रूप में पारामीटर पास किया जाता है:

उदाहरण

कंट्रोलर में बनाए गए विशेषताएँ दृश्य में उदाहरण के रूप में उदाहरण की जा सकती है:

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>

亲自试一试

कब नियंत्रक में $scope ऑब्जेक्ट के गुण जोड़ते हैं तो, दृश्य (HTML) इन गुणों की पहुच कर सकता है。

दृश्य में, आप $scope पूर्वसर्ग, आपको केवल एक गुणांक का संदर्भ देना होगा, जैसे {{carname}}。

क्षेत्र को समझें

यदि हम AngularJS अनुप्रयोग को इसके निम्नलिखित हिस्सों से बना हुआ मानें:

तो क्षेत्र मॉडल है।

क्षेत्र एक जोड़ी गया JavaScript ऑब्जेक्ट है, जिसमें गुण और विधियां हैं जो दृश्य और नियंत्रक के लिए उपलब्ध हैं。

उदाहरण

यदि आप दृश्य में परिवर्तन करेंगे, मॉडल और नियंत्रक अद्यतन होंगे:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>मेरा नाम है {{name}}</h1>

亲自试一试

अपने क्षेत्र को समझें

किसी भी समय अपने से जानना महत्वपूर्ण है।

उपरोक्त दो उदाहरणों में एक ही क्षेत्र है, इसलिए अपने क्षेत्र को समझना समस्या नहीं है, लेकिन बड़े अनुप्रयोग के लिए HTML DOM के कुछ हिस्से केवल कुछ क्षेत्रों की पहुच कर सकते हैं。

उदाहरण

ng-repeat डिरेक्टिव से निपटने के दौरान, प्रत्येक दोहराव को वर्तमान दोहराव प्रतियोग की पहुच कर सकता है:

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
  <li ng-repeat="x in names">{{x}}</li>
</ul>

亲自试一试

प्रत्येक <li> एलीमेंट सभी वर्तमान दोहराव प्रतियोग की पहुच कर सकते हैं, इस उदाहरण में यह एक शब्द है, जो इस्तेमाल करके x संदर्भित करने के लिए है।

एक शीर्षसूत्र

सभी अनुप्रयोग $rootScope，यह जो कि ng-app डिरेक्टिव के HTML एलीमेंट पर बनाया गया क्षेत्र。

शीर्षसूत्र पूरे अनुप्रयोग में उपलब्ध है。

यदि कोई वेरियेबल वर्तमान क्षेत्र और रूटस्कोप (rootScope) में एक ही नाम के साथ है, तो अनुप्रयोग वर्तमान क्षेत्र के वेरियेबल का उपयोग करेगा。

उदाहरण

शीर्षसूत्र और रूटस्कोप में एक नाम "color" वाला वेरियेबल है:

<body ng-app="myApp">
<p>शीर्षसूत्र का पसंदीदा रंग:</p>

{{color}}

<div ng-controller="myCtrl">
  
The scope of the controller's favorite color:

  
{{color}}



The rootScope's favorite color is still:


{{color}}

亲自试一试