एंगुलरजेएस स्कोप
दायरा HTML (दृश्य) और जावास्क्रिप्ट (नियंत्रक) के बीच बाध्यकारी हिस्सा है।
दायरा उपलब्ध गुणों और विधियों के साथ एक वस्तु है।
स्कोप व्यू और कंट्रोलर दोनों के लिए उपलब्ध है।
दायरे का उपयोग कैसे करें?
जब आप AngularJS में नियंत्रक बनाते हैं, तो आप $scopeऑब्जेक्ट को तर्क के रूप में पास करते हैं:
उदाहरण
नियंत्रक में किए गए गुणों को दृश्य में संदर्भित किया जा सकता है:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.carname
= "Volvo";
});
</script>
$scope
नियंत्रक में ऑब्जेक्ट में गुण जोड़ते समय , दृश्य (HTML) को इन गुणों तक पहुँच प्राप्त होती है।
दृश्य में, आप उपसर्ग का उपयोग नहीं करते हैं $scope, आप केवल एक संपत्ति के नाम का उल्लेख करते हैं, जैसे {{carname}}.
दायरे को समझना
यदि हम एक AngularJS एप्लिकेशन को शामिल करने पर विचार करते हैं:
- देखें, जो एचटीएमएल है।
- मॉडल, जो वर्तमान दृश्य के लिए उपलब्ध डेटा है।
- नियंत्रक, जो कि जावास्क्रिप्ट फ़ंक्शन है जो डेटा को बनाता/बदलता/हटा/नियंत्रित करता है।
फिर दायरा मॉडल है।
दायरा गुणों और विधियों के साथ एक जावास्क्रिप्ट ऑब्जेक्ट है, जो दृश्य और नियंत्रक दोनों के लिए उपलब्ध है।
उदाहरण
यदि आप दृश्य में परिवर्तन करते हैं, तो मॉडल और नियंत्रक अपडेट हो जाएंगे:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script>
अपने दायरे को जानें
यह जानना महत्वपूर्ण है कि आप किसी भी समय किस दायरे से निपट रहे हैं।
ऊपर दिए गए दो उदाहरणों में केवल एक ही दायरा है, इसलिए आपके दायरे को जानना कोई समस्या नहीं है, लेकिन बड़े अनुप्रयोगों के लिए HTML DOM में ऐसे अनुभाग हो सकते हैं जो केवल कुछ क्षेत्रों तक ही पहुंच सकते हैं।
उदाहरण
निर्देश के साथ काम करते समय ng-repeat, प्रत्येक पुनरावृत्ति के पास वर्तमान पुनरावृत्ति वस्तु तक पहुंच होती है:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.names
= ["Emil", "Tobias", "Linus"];
});
</script>
प्रत्येक <li>तत्व की वर्तमान पुनरावृत्ति वस्तु तक पहुंच होती है, इस मामले में एक स्ट्रिंग, जिसे उपयोग करके संदर्भित किया जाता है x।
रूट स्कोप
सभी अनुप्रयोगों में एक $rootScopeहोता है जो HTML तत्व पर बनाया गया दायरा होता है जिसमें ng-appनिर्देश होता है।
रूटस्कोप पूरे एप्लिकेशन में उपलब्ध है।
यदि किसी चर का वर्तमान दायरे और रूटस्कोप दोनों में समान नाम है, तो अनुप्रयोग वर्तमान दायरे में एक का उपयोग करता है।
उदाहरण
"रंग" नामक एक चर नियंत्रक के दायरे और रूटस्कोप दोनों में मौजूद है:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is
still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl',
function($scope) {
$scope.color = "red";
});
</script>
</body>