AngularJS స్కోప్

స్కోప్ (scope) అనేది HTML (వీక్షణ) మరియు JavaScript (కంట్రోలర్) మధ్య బైండింగ్ భాగం.

అనునాతాలు మరియు పద్ధతులు కలిగిన ఒక అనునాతి ఆధారం.

స్కోప్ మరియు కంట్రోలర్కు ఉపయోగపడుతుంది.

స్కోప్ని ఎలా ఉపయోగించాలి?

మీరు 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 అప్లికేషన్ను ఈ కింది భాగాలకు సమాంతరంగా భావించగలమును:

  • వీక్షణ, అనగా HTML.
  • మోడల్, అనగా ప్రస్తుత వీక్షణకు లభించే డాటా.
  • కంట్రోలర్, అనగా జావాస్క్రిప్ట్ ఫంక్షన్, డాటాను సృష్టించడానికి / మార్చడానికి / తొలగించడానికి / నియంత్రించడానికి ఉపయోగిస్తారు.

అప్పుడు స్కోప్ అనేది మోడల్ కాగలదు.

స్కోప్ అనేది గుణాలు మరియు పద్ధతులు కలిగిన జావాస్క్రిప్ట్ పదార్థం, ఇవి వీక్షణ మరియు కంట్రోలర్ కు లభించుతాయి.

ఇన్స్టాన్స్

మీరు వీక్షణలో మార్పులు చేసినప్పుడు, మోడల్ మరియు కంట్రోలర్ నవీకరించబడతాయి:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>నా పేరు అంటే {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</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అది మరియు దాని లో ఉంది ng-app సూచనలు యొక్క HTML మెటాడ్ లో సృష్టించబడిన స్కోప్.

rootScope మొత్తం అప్లికేషన్ లో లభించుతుంది.

ఒక వేదిక ప్రస్తుత స్కోప్ మరియు రూట్ స్కోప్ (rootScope) లో ఒకే పేరు కలిగి ఉంటే, అప్లికేషన్ ప్రస్తుత స్కోప్ లోని వేదికను ఉపయోగిస్తుంది.

ఇన్స్టాన్స్

నియంత్రక యొక్క స్కోప్ మరియు rootScope లోను ఒక 'color' అనే వేదిక ఉంది:

<body ng-app="myApp">
<p>రూట్ స్కోప్ యొక్క ప్రియమైన రంగులు:</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>

స్వయంగా ప్రయత్నించండి